Question

我有一个960像素宽#container，我有4个240px砖块，由jQuery砌体提供动力。然后我在砖块的左侧和右侧有一个10px填充，使砖块宽220px。

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

我尝试添加

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

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

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

感谢您的帮助。我知道我可能把这个问题说得太可怕了，所以如果你有问题，那就问问吧！

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

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

当砖块有边距时，jQuery砌体适合容器内部

1 个答案: