为4个连续的div模拟2列

Question

我连续4次div：

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

假设每个孩子div具有不同的内容，不同的高度，并且为了清晰起见而添加了边距，它显示如下：

没有以任何方式更改HTML（没有向div添加类，没有添加中间列div），我想实现此布局：

放置div的顺序并不重要。

我尝试过以下方面的事情：

.child { width: 50%; }
.child:nth-child(even) { float: left; }
.child:nth-child(odd) { float: right; }

但是对齐是关闭的。有任何CSS向导有想法吗？

Answer 1

这有用吗？

DEMO

.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;
}

Answer 2

您可以使用CSS列，其中包含good partial support across browsers (primarily prefixed though), but full support is not so great。

试一试：

.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进行演示：http://jsfiddle.net/xwwe3/（完成My First Colors以演示正在发生的事情）。

列设置为250px宽，我发现.child在给定display: inline-block; width: 100%;之前不服从。然后将.container的宽度设置为520px，使列的沟槽宽度为10px，两列（250 * 2 + 10 = 520）

因此，取决于您是否认为您的用例支持是可接受的取决于您。调整.child元素的高度确实会让一些奇怪的事情发生，但我建议你进一步阅读CSS专栏，然后尝试找出那里的内容。

或者，jQuery masonry是实现此目标的常用方法。