CSS 中的 2 列布局(排序项目)

Question

有没有办法仅使用 css 使用此 html 代码显示 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

如果您管理块格式上下文，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>

它符合您在此处的预期布局，但它也会与真实内容相匹配吗？

Answer 2

您可以做到这一点的一种方法是像这样浮动.column1和.column2类：

.container {
width: 100%;
}
.column1 {
float: left;
width: 50%;
}
.column2 {
float: right;
width: 50%;
}

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

您也可以通过仅使用两个表示每列的内部div 来简化此操作，例如：

<div class="container">
<div class="column1">
...
</div>
<div class="column2">
...
</div>
</div>

Answer 3

你也可以通过使用flex使用最少的代码来实现同样的事情。只需将以下代码添加到您的 CSS 中即可。

.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 50%;
}

说明 ：- 您将显示类型 flex 添加到容器中，因此所有元素将在此div 内彼此相邻排列。

现在，当您为内部div 提供 50% 的宽度并为容器提供 flex-wrap： wrap 时，它确保只有 2 个div 彼此相邻，因为没有剩余空间来容纳更多。

或者，如果您希望物品彼此靠近，您可以减小外部容器的宽度。

.container {
display: flex;
flex-wrap: wrap;
width: 10%;
}
.container div {
width: 50%;
}

这将更接近您的期望。