1

プロジェクトにタイムライン効果を適用しようとしています。私はいくつかの調査を行い、この例を見つけました

そして、あなたがここで見ることができるように、それはうまくいきません...これがそれを作った部分です：

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

ご覧のとおり、スペースに少し問題があります:)

何か案が ？

4

1 に答える 1

0

基本的に、各ブロックを短くするには、各ブロックの高さを知る必要があります。あなたの答えはこの投稿に依存しています： 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;
}
于 2013-02-04T17:05:21.470 に答える