Question

我喜欢Facebook时间轴与错开的两栏帖子的布局。我试图用标准div和浮点数创建相同的布局。漂浮到一侧但不漂浮到另一侧时浮子运行良好。考虑到存在多个高度的块，您如何建议我最好地解决这个布局？它将被用于博客，我知道有人在此创建了一个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

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

然而，This method worked for me

You can see it in action in this Fidddle

我希望它可以帮助你或其他任何人！：）

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

2 个答案: