1

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

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

显示 1

在不以任何方式更改 HTML 的情况下（不向divs 添加类，不添加中间列div），我想实现这种布局：

显示 2

s 的放置顺序div并不重要。

我已经尝试过以下方式：

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

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

4

2 回答 2

2

这行得通吗？

演示

.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;
}
于 2013-11-12T18:22:39.393 回答
1

好吧，您可以使用 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 进行演示： http: //jsfiddle.net/xwwe3/（完成我的第一个颜色来演示正在发生的事情）。

列设置为 250px 宽，我发现在.child给定之前没有遵守display: inline-block; width: 100%;。然后将宽度.container设置为 520px，使列的间距宽度为 10px，两列 (250 * 2 + 10 = 520)

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

或者，jQuery masonry是实现此目的的一种流行方式。

于 2013-11-12T18:42:40.040 回答