我喜欢Facebook时间轴与交错的两栏帖子的布局.我试图用标准的div和浮点数创建相同的布局.漂浮到一侧但不漂移到另一侧时浮子运行良好.考虑到存在多个高度的块,您如何建议我最好地解决这个布局？它将用于博客,我知道有人在此创建了一个wordpress模板,但是有可能将布局简化为最简单的形式吗？在我的时间轴和wordpress模板上使用Chrome的开发人员窗口后,我很难找到合适的CSS代码并需要帮助.
解决方法
你必须让左边的容器漂浮并清空,右边的容器要漂浮并清理好.您可以使用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);
}
}
