当砖 block 有边距时，jQuery Masonry 适合容器内部

Question

我有一个 960 像素宽的 #container，我有 4 个 240 像素的砖 block ，由 jQuery 砌体提供支持。然后我在砖 block 的左右两侧各填充了 10px，使砖 block 的宽度为 220px。

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

但是如果你注意到，砖 block 靠得太近了，所以我给 .item 砖 block 添加了一个 margin-right，并减少了砖 block 的宽度来弥补它。但是，最右边的砖 block 有 5px 的 margin-right，所以砖 block 不构成完整的 960 像素容器，请参见:

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

我尝试添加一个

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

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

基本上，我想问的是如何让元素的最后一列没有边距，或者如何让元素/砖 block 填满整个 960 像素的容器。

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

Answer 1

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

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;
}

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