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/的砌体并发现了一个问题，即它在Firefox和IE中无效。

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

有人可以告诉我如何解决它。

Answer 1

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

<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中。

jquery masonry插件的空间问题在IE和Firefox中无效

1 个答案: