如何以类似于Facebook时间轴的方式布置我的内容div？ [英] How do I lay out my content divs in a similar manner to Facebook Timeline?

问题描述

我喜欢Facebook时间轴与交错的两列帖子的布局。我试图创建相同的布局只是标准 div s和浮动。当漂浮到一侧时，漂浮物工作良好，但不漂浮到另一侧。考虑到有多个高度的块，你怎么建议我最好处​​理这种布局？它将用于一个博客，我知道有人创建了一个WordPress模板，但是有可能将布局提炼成最简单的形式吗？在我的时间轴和WordPress模板使用Chrome的开发人员窗口后，我很难找到合适的CSS代码，需要帮助。

I like the layout that Facebook Timeline has with the staggered two column posts. I have tried to create the same layout with just standard divs and floats. The floats work well when floating to one side, but not to the other. Considering there are blocks of multiple heights, how do you suggest I best tackle this layout? It would be used for a blog, and I am aware that someone has created a WordPress template on this, but is it possible to distil the layout into its simplest form? After using Chrome's Developer window on my Timeline and the WordPress template, I am struggling to find the appropriate CSS code and need help.

我会把我作为一个 jsFiddle 。如果您需要他们确认，我已经添加了额外的块。

I'll put what I have as a jsFiddle. I've added extra blocks if you need them to make sure.

推荐答案

并左边清除，右边的那些是浮动和清除权。你可以使用javascript或任何你使用的服务器端语言来做到这一点。一些快速的jquery会是这样的。

you have to have the containers on the left be floated and cleared left and the ones on the right be floated and cleared right. You can do this either with javascript or whatever your server side language you use. something quick in jquery would be like this.

（一个完成的小提琴.. http： /jsfiddle.net/gK2Vn/ 我是为这个问题的裸骨头。）

(a completed fiddle.. http://jsfiddle.net/gK2Vn/ I was going for the bare bones of the question..)

.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);

    }
}

这篇关于如何以类似于Facebook时间轴的方式布置我的内容div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！