4

私は内容を表示するために石積みを使用しています、masonry.desandro.com、問題はコンテナに適切な高さを与えていないことですそうすべき。ここに石積みjsがあります。

$(function(){
      $('#ItemContainer').masonry({
        // options
        itemSelector : '.item'
      });
    });

これは私のHTMLスケルトンです

<html><body>
<div id="content">
  <ul id="ItemContainer">
    <li class="item">here li content with block style</li>
    ....more li's
  </ul>
</div>
</body></html>

しかし、各liの高さを設定すると正常に動作しますが、その中の画像は任意の高さを持つことができるので、その高さを自動に保つ必要があります. アイテムの 2 行目は最初の半分まで、3 番目は 2 番目などに重なっています... ItemContainer に 426 ピクセルの高さを与えるたびに。

ここにコードをアップロードしました... www.testingmycode.comuv.com/rough2.html ...チェックアウトしてください。望ましくない動作を示し、リロードを押すと、タイルはMS Windowsのカードゲームのように配置され、ウィンドウのサイズを変更すると適切に配置されます...ブラウザのリロードボタンを2〜3回押し、ウィンドウのサイズを変更して表示します. チェックアウトしてください。

4

2 に答える 2

6

あなたのコードは見えませんが、imagesLoaded()メソッドを使用する必要があります。

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
于 2013-02-21T00:10:17.877 に答える
0

divのクリアに問題があると思います..

このコードをあなたのコードのいくつかの場所に置き、チェックしてください..

<div style="clear:both"></div>

これは通常、float をどこかで使用した場合に発生し、一度配置すると適切に機能します。

于 2012-08-17T11:50:16.420 に答える