html - HTML/CSS 时间线效果的一些问题

Question

我正在尝试对元素产生时间线影响。我做了一些研究，发现 this exemple

而且，如您所见here ，它不能很好地工作......这是成功的部分:

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

好吧，如您所见，存在一点空间问题:)

有什么想法吗？

Answer 1

您基本上需要知道每个 block 的高度才能将其短路。您的答案取决于这篇文章: How do I lay out my content divs in a similar manner to Facebook Timeline?

你可以在这里看到工作中的 fiddle : http://jsfiddle.net/gK2Vn/

在某种程度上你需要添加以下脚本:

$(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);
        }
    }
});

并将您的 CSS 更改为:

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