HTML / CSS时间轴效果有些麻烦

Question

I'm trying to a timeline effect on a project. I made some research and found this exemple

And, as you can see here , it doesn't work well... Here is the part which made it :

section#lastPost {
  width: 960px;
  margin: 0 auto; }
section#lastPost .TLItem {
  clear: left;
  float: left; }
section#lastPost .TLItem:nth-child(2n) {
  clear: right;
  float: right; }

Well, as you can see, there is a little space problem :)

Any idea ?

Answer 1

You basically need to know the height of each block to short it out. Your answer relies in this post: How do I lay out my content divs in a similar manner to Facebook Timeline?

And you can see the working fiddle here: http://jsfiddle.net/gK2Vn/

In a way you need to add the following script:

$(document).ready(function() {
    var left_column_height = 0;
    var right_column_height = 0;
    var items = $('section#lastPost #TL .TLItem');
    for (var i = 0; i < items.length; i++) {
        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);
        }
    }
});

And change your CSS to:

section#lastPost #TL .TLItem {
    clear: left;
    float: left;
}
section#lastPost #TL .TLItem.right {
    clear: right;
    float: right;
}