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

Question

我正在尝试对项目产生时间线效果。我做了一些研究，发现了这个例子

而且，正如您在此处看到的那样，它效果不佳......这是制作它的部分：

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

您基本上需要知道每个块的高度才能将其短路。您的答案取决于这篇文章： 如何以与 Facebook 时间线类似的方式布置我的内容 div？

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