像 Facebook 时间轴一样，将高度可变的 div 堆叠在 2 列中

Question

我想创建自然的内容流。我现在面临的问题是

只会彼此相邻排列。它们不会穿过对面浮动方块的底部边缘。

下图清楚地说明了问题。假设我有 4 个高度可变的

：

• Div1 始终从左侧开始
• Div2 始终显示在右侧
• Div3 位于左侧或右侧，具体取决于 Div1 的高度和Div2
• Div4 在这种情况下，Div4 没有粘到 Div2 的底部
• Div5 也会出现同样的问题

所以，div 的位置 > Div2 应由前面的 div 的高度确定。您能告诉我如何实现这一目标吗？

Answer 1

检查 Facebook CSS 和 HTML 后，我发现他们使用 list 并在 left 之间交替 li 元素上的 float 来实现此目的 和 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 上没有找到此问题的示例（一个元素永远不会超过的高度2）所以我相信他们已经考虑到了这一点。他们可能通过使用 JavaScript 来实现这一点 - 如果您检查元素，它们有一个与元素高度匹配的属性 data-height 。

Answer 2

我昨晚做了这个工作，发现了一个相当简单的方法。

比较左列和右列的底部位置，将新的 li 元素追加到值较小的一侧，可以通过以下方式完成：

var last_left_post = $('.left:last');
var last_right_post = $('.right:last');
var left_position = 0;
var right_position = 0;

left_position = last_left_post.height() + last_left_post.offset().top;
right_position = last_right_post.height() + last_right_post.offset().top;

if(left_position<=right_position){
    $('#timeline').append('<li class="left"></li>');
}else{
    $('#timeline').append('<li class="right"></li>');
}

.left 和 .right 使用与您相同的 css。