css - 在 2 列中堆叠可变高度的 div，例如 Facebook 时间轴

Question

我想创建一个自然的内容流。我现在面临的问题是 <div> s只会挨着排队。它们不会越过对面 float block 的底部边缘。

下图清楚地显示了问题。假设我有 4 <div>具有可变高度的 s:

• Div1 总是从左边开始
• Div2 始终显示在右侧
• Div3 在左侧或右侧，取决于 Div1 和 Div2 的高度
• Div4 在这种情况下，Div4 不会粘在 Div2 的底部
• div5出现同样的问题

因此，divs > Div2 的位置应该由前面的div的高度决定。您能告诉我如何实现这一目标吗？

Answer 1

在检查了 Facebook CSS 和 HTML 之后，我发现他们使用 list 并在 li 元素上交替使用 float 来实现这一点 left 和 right(即，每个偶数元素都向右浮动)

例如:

HTML

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

CSS

li {
    clear: left;
    float: left;
    display: block;
    height: 100px;
    width: 200px;
    margin-bottom: 10px;
}

li:nth-child(2n) {
    clear: right;
    float: right;
}

工作示例:http://jsfiddle.net/gBVPj/

只有当一侧的元素不超过另一侧的两个元素的高度时，这种方法才有效。例如，在您的图表中，如果方框 2 的高度大于方框 1 和方框 3 的总和，则方框 5 将移位并与方框 4 对齐。

像这样:http://jsfiddle.net/gBVPj/1/

我没有在 Facebook 上找到这个问题的例子(一个元素的高度永远不会超过两个)所以我相信他们已经考虑到了这一点。他们可能通过使用 JavaScript 来实现这一点 - 如果您检查元素，他们有一个与元素高度匹配的属性 data-height。