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

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

我会把我拥有的东西作为jsFiddle.如果你需要它我会添加额外的块来确保.

解决方法 你必须让左边的容器漂浮并清空,右边的容器要漂浮并清理好.您可以使用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);    }}

总结

以上是内存溢出为你收集整理的HTML – 如何以与Facebook时间线类似的方式布置我的内容div？全部内容，希望文章能够帮你解决HTML – 如何以与Facebook时间线类似的方式布置我的内容div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。