html - 如何以类似于 Facebook 时间轴的方式布置我的内容 div？

Question

我喜欢 Facebook Timeline 的交错两列帖子的布局。我试图用标准的 div 和 float 创建相同的布局。当漂浮到一侧时，漂浮物工作良好，但漂浮到另一侧时效果不佳。考虑到有多个高度的 block ，你建议我如何最好地处理这个布局？它将用于博客，我知道有人已经为此创建了一个 WordPress 模板，但是是否可以将布局提炼成最简单的形式？在我的时间轴和 WordPress 模板上使用 Chrome 的开发者窗口后，我很难找到合适的 CSS 代码并需要帮助。

我会把我拥有的作为 jsFiddle .如果您需要它们来确保，我已经添加了额外的 block 。

Answer 1

你必须让左边的容器向左浮动并向左清除，而右边的容器向右浮动并向右清除。您可以使用 javascript 或您使用的任何服务器端语言来执行此操作。 jquery 中的 something quick 就像这样。

(一个完整的 fiddle .. http://jsfiddle.net/gK2Vn/ 我正在寻找问题的核心..)

.item {
  float: left;
  clear: left;
}
.item.right {
  float: right;
  clear: right;
}

var left_column_height = 0;
var right_column_height = 0;
var items = $('.item');
for (var i = 0; i < items.length; i++) {
    items.eq(i).height(Math.floor(Math.random() * 100) + 10);
    if (left_column_height > right_column_height) {
        right_column_height+= items.eq(i).addClass('right').outerHeight(true);
    } else {
        left_column_height+= items.eq(i).outerHeight(true);

    }
}