【问题标题】:Some trouble with a HTML / CSS Timeline effectHTML / CSS时间线效果的一些问题
【发布时间】:2013-01-17 16:06:25
【问题描述】:

我正在尝试对项目产生时间线效果。我做了一些研究,发现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; }

嗯,如你所见,有一点空间问题:)

有什么想法吗?

【问题讨论】:

    标签: html css timeline


    【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 2013-09-27
      • 1970-01-01
      • 2021-06-28
      • 2017-06-24
      • 2015-11-29
      • 1970-01-01
      • 1970-01-01
      • 2018-06-01
      • 1970-01-01
      相关资源
      最近更新 更多