Question

对于我的生活，在使用流体/百分比布局时，我无法弄清楚如何移除宽檐槽并设置为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
}

我需要调整什么？

Answer 1

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

body { overflow-y:scroll; }

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

希望这有助于其他人。

Answer 2

仔细观察砌体代码的作用：

当您设置列宽时，该函数返回一个数学结果，该结果取容器宽度并将其除以5.但是在您的CSS中，您的框宽度是父级的第3个。因此，砌体正在尝试将第3宽度框放入第5宽度列。

这很可能是你的问题，但是砌体和流畅的布局可能会很棘手，所以可能不是全部...

jQuery砌体流体天沟修复

2 个答案: