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>

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

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

这一切都在此处的文档中。

于 2012-09-12T10:44:50.513 回答