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

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

你可以在这里看到工作中的小提琴： 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;
}