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

发布时间：2020-12-14 18:33:24 所属栏目：资源来源：网络整理

导读：我喜欢Facebook时间轴与交错的两栏帖子的布局.我试图用标准的div和浮点数创建相同的布局.漂浮到一侧但不漂移到另一侧时浮子运行良好.考虑到存在多个高度的块,您如何建议我最好地解决这个布局？它将用于博客,我知道有人在此创建了一个WordPress模板,但是有可

我喜欢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);

    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!