如何以与Facebook时间线类似的方式布置我的内容div？

Question

我喜欢Facebook Timeline与交错的两栏帖子的布局.我试图用标准divs和浮点数创建相同的布局.漂浮到一侧但不漂浮到另一侧时浮子运行良好.考虑到存在多个高度的块,您如何建议我最好地解决这个布局？它将被用于博客,我知道有人在此创建了一个WordPress模板,但是有可能将布局简化为最简单的形式吗？在我的时间轴和WordPress模板上使用Chrome的开发人员窗口后,我很难找到合适的CSS代码并需要帮助.

我会把我所拥有的作为一个jsFiddle.如果你需要它,我已经添加了额外的块来确保.

Answer 1

你必须让左边的容器漂浮并清空,右边的容器要漂浮并清理好.您可以使用javascript或您使用的任何服务器端语言来执行此操作.在jquery中快速的东西会是这样的.

(一个完整的小提琴.. 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);

    }
}

Answer 2

我有同样的问题,马克的回答对我不起作用.

但是,这种方法对我有用

你可以在这个Fidddle中看到它的实际效果

我希望它可以帮助你或其他任何人!:)