同位体アイテムの高さ

Question

ブートストラップベースのウェブサイトには、アイソトーププラグインで管理されているギャラリーがあるページがあります。ギャラリーの各アイテムの長さが異なるテキストがあります。

ギャラリーコンテナは、ブートストラップグリッドクラスを利用しています。＃グリッドサイザーの項目が含まれています

<div id="gallery_container" class="row"> 
    <div id="grid-sizer" class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> 
    <div class="photo"> 
    <div class="peu-producte"> 
     <div class="text-peu"> 
     Some text 
     </div> 
    </div> 
</div> 

したがって、各列は、小さなディスプレイにも適した割合によりサイズます。

var $container = $('#gallery_container'); 

    $container.isotope({ 
     itemSelector : '.photo', 

     masonry: { 
      columnWidth: '#grid-sizer' 
     } 
    }); 

問題は次のとおりです：

これは同位体が初期化される方法である同位体は、より広い.photoのdivを想定しているかのよう.text-peu内のテキストは、より長い1行、それはスキップさ隣.photoアイテムであるとき。

私は<br>タグでテキストを分割すると、計算が正しいことを経験しました。

Answer 1

Isotopeを初期化する前にdivの幅を.photoに設定すると、問題が解決しました。