当砖块有边距时，jQuery Masonry 适合容器答案

【问题标题】：jQuery Masonry fit inside container when bricks have margins当砖块有边距时，jQuery Masonry 适合容器
【发布时间】：2013-06-26 02:18:27
【问题描述】：

我有一个 960 像素宽的 #container，我有 4 块 240 像素的砖块，由 jQuery 砖石驱动。然后我在砖块的左右两边都有一个 10 像素的填充，使砖块宽 220 像素。

这是一个例子：http://jsfiddle.net/xECcm/

但是如果你注意到，砖块靠得太近了，所以我在 .item 砖块上添加了一个边距，并减小了砖块的宽度来弥补它。但是，最右边的砖块有 5px 的边距，所以砖块不构成完整的 960 像素容器，请参阅：

http://jsfiddle.net/xECcm/2/

我尝试添加一个

.item:last-child{
    margin-right:0;
}

但这也不起作用，请参阅：http://jsfiddle.net/xECcm/3/

所以基本上，我在问如何使最后一列项目没有边距，或者如何让项目/砖块填满整个 960 像素容器。

感谢所有帮助。我知道我可能把这个问题说得很糟糕，所以如果你有问题，尽管问！

【问题讨论】：

喜欢this 或this？为了安全起见，我认为你的数字需要改变你所做的任何事情，因为(960-30)/4 = 232.5（不是整数）。如果这是您所追求的，请告诉我，我会写一个答案。
@thirtydot，这正是我需要的。这是跨浏览器吗？
当然，虽然它确实需要一些小调整才能在例如 Firefox 中工作。我会写一个答案。
@thirtydot，好的，那太好了。谢谢

标签： jquery html css jquery-masonry

【解决方案1】：

完成这项工作的核心思想是在 jQuery Masonry 中使用gutter option。

http://jsfiddle.net/thirtydot/xECcm/6/

$(document).ready(function() {
    var $container = $('#container');
    $container.masonry({
        itemSelector: '.item',
        gutter: 12
    });
});

我使用box-sizing: border-box; 只是为了让设计更易于使用。如果您不使用它，则在更改水平填充时必须调整width：

.container {
    width: 960px;
    background: #555;
}
.item {
    width: 231px;
    background: #fff;
    padding: 0 10px 15px 10px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

最后，为了确保盒子接触到容器的两个边缘，您需要确保您的数字是“正确的”。

【讨论】：