0

在我的一生中，我无法弄清楚如何在使用流体/百分比布局时移除宽排水沟并将其设置为 0 。

我已经尝试将gutterWidth: 0边距和填充设置为0%，但它仍然不起作用。

这是 Masonry 网站的代码。

$('#container').masonry({
    itemSelector: '.box',
    gutterWidth:0,
// set columnWidth a fraction of the container width
    columnWidth: function (containerWidth) {
        return containerWidth / 5;
    }
});

CSS

.box {
    width:33%;
    margin:0%;
    padding:0%
}
.box img {
    width:100%;
    height:auto
}

我需要调整什么？

4

2 回答 2

5

我在使用基于百分比布局的 Masonry 时遇到了类似的问题。对我来说，它最终成为浏览器滚动条的问题。宽度是在没有滚动条的情况下计算的。Masonry 运行后，由于出现了滚动条，测量结果略有偏差。我能够通过添加以下 CSS 来解决这个问题：

body { overflow-y:scroll; }

即使不需要滚动条，这也会强制滚动条，从而使计算准确并修复排水沟。

希望这对其他人有帮助。

于 2014-10-06T20:53:09.110 回答
0

仔细看看砌体代码在做什么：

当您设置列宽时，该函数将返回一个数学结果，该结果采用容器宽度并将其除以 5。但是在您的 css 中，您的框宽度是父项的第三个。所以砌体试图将第 3 个宽度的盒子放入第 5 个宽度的列中。

这很可能是您的问题，但是砖石和流体布局可能很棘手，因此可能并非全部...

于 2012-06-18T11:03:59.607 回答