主页 / 问题 / 1354810
Accepted
Alex
Asked:2022-04-28 15:35:24 +0000 UTC2022-04-28 15:35:24 +0000 UTC

如何将两列文本合并为一列？

  • 772

如何将两列文本合并为一列，使其看起来像这样：

 <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>

javascript

1 个回答

  1. Best Answer

    这可以使用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>

    • 0

相关问题