Css 模拟4个连续div的2列

我有4个连续的

div

s：

<div class="container">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
    <div class="child">D</div>
</div>

但是路线是关闭的。任何CSS向导都有想法吗？

这行吗

---

您可以使用CSS列，它具有

试试看：

.container { 
    -webkit-column-width: 250px; 
    -moz-column-width: 250px; 
    column-width: 250px; 
    width: 520px; 
    background: yellow;
}
.child { 
    background: red; 
    margin-bottom: 10px; 
    display: inline-block; 
    width: 100%; 
}

看看这个jsfiddle进行演示：（用我的第一个颜色来演示正在发生的事情）

列被设置为250px宽，我发现

.child

在给定

display:inline块之前没有遵守；宽度：100%。然后将
.container
的宽度设置为520px，以使列的槽宽为10px，并有两列（250*2+10=520）

因此，取决于您是否认为支持对于您的用例是可接受的，这取决于您自己。调整
.child
元素的高度确实会导致一些奇怪的事情发生，但我建议您进一步阅读CSS专栏，并尝试了解其中的内容

或者，这是一种流行的实现方法。
如果您希望div从左向右排列，只需更改周围浮动的方向。@Younes:这不再符合元素之间没有垂直间隙（除了边距）的原始要求。@thirtydot Ah，错过了这一部分。为了我当前的项目，我可以处理这个缺口，但为了这个S/O问题，我将保留原始需求（可能在将来对其他人有用）。我认为没有办法修复（例如）这个场景：。我可能错了，我没有经常使用CSS3列。是的，除了给容器一个固定的高度：我想你可能是对的，但我也没有经常使用它们。如果高度完全是随机的，我不相信有办法做到这一点。我说我已经试过很多次了（我已经发布了很多关于这个问题的答案）。对于您的情况，我可能会使用几行JavaScript来添加包装列
div
s。对于一般情况，请使用。
.container {
    width:220px; /* (child width)x2 + (child margin)x4 */
}
.child {
    margin:5px;
    background-color:#FF0080;
    width:100px;
}
.child:nth-child(even) {
    float: left;
}
.child:nth-child(odd) {
    float: right;
}

.container { 
    -webkit-column-width: 250px; 
    -moz-column-width: 250px; 
    column-width: 250px; 
    width: 520px; 
    background: yellow;
}
.child { 
    background: red; 
    margin-bottom: 10px; 
    display: inline-block; 
    width: 100%; 
}