jquery masonry插件的空间问题在IE和firefox中不起作用

Question

<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/的masonry，发现了一个问题，它不能在火狐和IE中工作。

它在单行中显示了预期的4个元素。在Firefox和Ie中，他们只有2个元素显示在elemnts上，其他地方是一个空格。

有没有人能告诉我怎么才能修复它。

Answer 1

在Chrome的devtools中查看它，您会发现它的设置错误。Masonry对容器中的元素进行操作。不要只是在里面放其他东西，比如页眉和页脚。您没有给容器一个高度和宽度-宽度由查看器的浏览器窗口决定，高度由元素的数量和大小决定。基本设置的组织方式如下：

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

理想情况下，这些元素应该遵循模块的宽度和高度，正如您在原始文档中看到的那样。然后像这样调用Masonry：

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

所有这些都在文档here中。