2

私はこの問題を何時間も解決してきましたが、意図したとおりに機能させることができないようです。

ブートストラップ グリッドを使用して、ボックスを次のようにセットアップします。

ここに画像の説明を入力

何らかの理由で、プラグインjQuery Masonryを使用した後、わずか2列になりました（これを使用して、さまざまなdivの高さを処理しました）。

HTML

  <div class="container" >
    <div id="grid" class="row">

      <div class="span5 box box1">1</div>
      <div class="span4 box box2">2</div>
      <div class="span3 box box3">3</div>

      <div class="span5 box box4">4</div>
      <div class="span4 box box5">5</div>
      <div class="span3 box box6">6</div>      

    </div>
  </div>

CSS

.box { background: #ccc; margin-bottom: 20px; } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }

.box4 { height: 250px; }
.box5 { height: 340px }
.box6 { height: 240px }

JS

jQuery(function(){
    jQuery('#grid').masonry({
      itemSelector: '.box',
    });         

});

デモ: http://jsbin.com/afihux/3/

可能な限りレスポンシブにしたいので、Twitter Bootstrap を使用した理由の 1 つです。

4

1 に答える 1

2

今のところ、私はこのアプローチで解決しました：

.box { background: #ccc; position: relative } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }
.box4 { height: 250px; top: 10px; }
.box5 { height: 340px; top: -80px; }
.box6 { height: 240px; top: 20px; }


@media (min-width: 1200px) {

.box4 { top: 20px; }
.box5 { top: -70px }
.box6 { top: 30px }

}

@media (max-width: 767px) {
.box { margin-bottom: 20px; top: 0; }
}

デモ: http://jsbin.com/avupok/1

全体のレイアウトを再調整するために、css のtopプロパティをいじってみました。

グリッドはまだ管理可能 (6 ボックスのみ) であるため、サードパーティの jQuery プラグインを使用する必要はないと思います。

相対プロパティを持つトッププロパティが他のブラウザでうまく機能するかどうかは、まだテストしていません。Google Chrome と Safari でのみテストしました。一部のブラウザで壊れる気がします。

これは改善の余地があります。

于 2013-06-02T03:59:08.270 に答える