2

我有一个 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 像素容器的方法。

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

4

1 回答 1

3

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

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

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

于 2013-06-26T02:48:58.490 回答