像Facebook时间线一样堆叠2列可变高度的div

Question

有人怎么能这样做？我想创建一个自然的内容流。我现在面临的问题是div只会相互排列。它们不会通过相对侧浮动块的底部边缘。

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

• Div1，始终向左开始
• Div2，始终显示在右侧
• Div3，位于左侧或右侧，具体取决于Div1和Div2的高度
• Div4，在这种情况下，Div4不会坚持Div2的底部
• Div5，同样的问题发生

所以，div的位置＆gt; Div2应该由前面div的高度决定。

Answer 1

在检查了Facebook CSS和HTML后，我发现他们使用list实现了这一点，并在float和{{1}之间的li元素上交替left （即每个偶数元素都向右浮动）

例如：

HTML 的

right

CSS

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

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

此方法仅在一侧的元素不超过另一侧的两个元素的高度时才有效。例如，在图表中，如果框2的高度大于框1和3的高度，则框5将被移位并与框4内联。

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

我没有在Facebook上找到这个问题的例子（一个元素永远不会超过两个的高度）所以我相信他们已经考虑到了这一点。他们可能通过使用JavaScript实现这一点 - 如果你检查元素，他们有一个属性li { clear: left; float: left; display: block; height: 100px; width: 200px; margin-bottom: 10px; } li:nth-child(2n) { clear: right; float: right; } ，它匹配元素的高度。

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。