0 
<div class="rectangle-wrapper">
        <div class="rectangle-3 rect-box">
            <div class="image-wrap">
                <img src="img source here" alt=""/>
            </div>
            <div class="controls">
                <i class="icon-arrow-up icon-2 icon-it"></i>

                <div class="text-3">69</div>
                <i class="icon-arrow-down icon-3 icon-it"></i>
                <a onclick="" href="#" class="btn-rect">
                    <div class="rectangle-4 rect-btn">
                        <div class="text-4">Sho Frenz</div>
                    </div>
                </a>
                <a onclick="" href="#"class="btn-rect">
                    <div class="rectangle-5 rect-btn">
                        <div class="text-5">Aii Waant!</div>
                    </div>
                </a>
            </div>
        </div>
</div>

 $(".rectangle-wrapper").masonry({
                itemSelector:".rect-box ",
                columnWidth:240,
                isFitWidth:true,
                gutterWidth:0
            });

http://masonry.desandro.com/の石積みを使用していますが、FirefoxとIEでは機能しないという問題が見つかりました。

単一の行に4つの要素が含まれていることを期待して表示されます。FirefoxとIeでは、要素に表示される要素は2つだけで、他の場所はスペースです。

誰かが私にそれを修正する方法を教えてもらえますか？

4

1 に答える 1

1

Chromeのdevtoolsでそれを見ると、セットアップが間違っています。組積造は、コンテナ内の要素を操作します。ヘッダーやフッターのような他のものをそこに置くだけではいけません。コンテナに高さと幅を指定しないでください。幅はビューアのブラウザウィンドウによって決定され、高さは要素の数とサイズによって決定されます。基本的なセットアップは次のように構成されています。

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

The elements should ideally follow a module width and height wise, as you can see in the original documentation. Then you call Masonry like this:

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});

It is all in the documentation here.

于 2012-09-12T10:44:50.513 に答える