css - CSS 中的 2 列布局(订购元素)

Question

有什么方法可以只使用 css 来显示 2 列布局吗？ (column1 类应该在第一列，column2 类应该在第二列)

<div class="container">
    <div class="column1">1a</div>
    <div class="column2">1b</div>
    <div class="column2">2b<br>zz</div>
    <div class="column1">2a</div>
    <div class="column2">3b</div>
    <div class="column2">4b</div>
    <div class="column2">5b</div>
    <div class="column1">3a</div>
    <div class="column1">4a</div>
</div>

我期望的结果:

1a 1b
2a 2b
3a zz
4a 3b
   4b
   5b

Answer 1

如果您管理 Block formatting context，

float 似乎是这里的最佳选择

例子:

* {
  box-sizing: border-box;
}

div div {
  box-shadow: inset 0 0 0 1px;/* see me */
  width: 50%;
  line-height: 1.4em; /* because of that 2 lines element , to hide the gap */
  background: lightblue;/* see me too */
}

.column1:first-child {
  float: left; /* let another float stand aside */
}

.column2 {
  float: right;
  clear: right;/* pile us to the far right */
}

div div:nth-child(odd) {
  background: lightgreen;/* see me different */
}

<div class="container">
  <div class="column1">1a</div>
  <div class="column2">1b</div>
  <div class="column2">2b<br>zz</div>
  <div class="column1">2a</div>
  <div class="column2">3b</div>
  <div class="column2">4b</div>
  <div class="column2">5b</div>
  <div class="column1">3a</div>
  <div class="column1">4a</div>
</div>

它符合您在这里的预期布局，但它是否也包含真实内容？