Как объединить две колонки текста в одну?

Question

Как объединить две колонки текста в одну, чтобы получилось вот так:

 <div class="right-col col">
   <span>1 строчка левого столбца</span>
   <span>1 строчка правого столбца</span>
   <span>2 строчка левого столбца</span>
   <span>2 строчка правого столбца</span>
   <span>3 строчка левого столбца</span>
   <span>3 строчка правого столбца</span>
   <span>4 строчка левого столбца</span>
   <span>4 строчка правого столбца</span>
</div>

Внутри строк span могут быть также теги, их следует сохранить.

.row {
  display: flex;
}
.left-col {
  background-color: red;
}
.right-col {
  background-color: orange;
}
 span {
 display: block;
 }
 .col {
  padding: 10px;
 }

<div class="row">
  <div class="left-col col">
    <span>1 строчка левого блока</span>
    <span>2 строчка левого блока</span>
    <span>3 строчка левого блока</span>
    <span>4 строчка левого блока</span>
  </div>
  <div class="right-col col">
    <span>1 строчка правого блока</span>
    <span>2 строчка правого блока</span>
    <span>3 строчка правого блока</span>
    <span>4 строчка правого блока</span>    
  </div>
</div>

Answer 1

Это можно сделать, используя flex-wrap + flex-basis:

.row {
  display: flex;
  flex-wrap: wrap;
}
.row > * {
  flex-basis: 50%;
}
.left-col {
  background-color: red;
}
.right-col {
  background-color: orange;
}
span {
 display: block;
}

 <div class="row">
   <span class="left-col">1 строчка левого столбца</span>
   <span class="right-col">1 строчка правого столбца</span>
   <span class="left-col">2 строчка левого столбца</span>
   <span class="right-col">2 строчка правого столбца</span>
   <span class="left-col">3 строчка левого столбца</span>
   <span class="right-col">3 строчка правого столбца</span>
   <span class="left-col">4 строчка левого столбца</span>
   <span class="right-col">4 строчка правого столбца</span>
</div>

БЛОГ НА HUSL

Как объединить две колонки текста в одну?

Ответы (1 шт):