jquery masonry：nth-​​child() 向子节点添加不需要的边距

Question

我正在尝试使用很棒的 jquery masonry 插件 -> http://desandro.com/resources/jquery-masonry/

插件工作得很好，但是我在创建布局时遇到了问题，我使用 nth-child() 选择器来消除每隔三个元素的边距。

#footerwidgets li.widget {
    margin: 0px 24px 24px 0px;
    width:340px;
}

#footerwidgets li.widget:nth-child(3n) {
  margin-right:0px;
}

因为我的这个小部件的容器正好是 1068 像素宽，所以三个小​​部件完全适合（因为最后一个小部件没有右边距）。

当我尝试使用 jquery masonry 插件时，此行为会被忽略！只有两列适合。（该插件有效，因此所有小部件都以砖石风格浮动。）当我检查元素时，每三个元素的右边距也为 24px。所以 nth-child 被忽略了。

有什么方法可以让它工作吗？

Answer 1

使用 jQuery，删除边距并使用 Masonry's gutterWidth option 代替它。

CSS：

#footerwidgets li.widget.masonry-brick { margin: 0; }

jQuery:

$('#footerwidgets').masonry({
  gutterWidth: 24
});

Answer 2

砌体不适用于可变大小的边距。您有三列和一个 528px 的容器。您最好的选择是使用三列 176 像素。每列的边距为 12 像素，宽度为 152 像素。

如果您希望总宽度减去左右边距为 528 像素，则将容器扩展为 544 像素（528 像素 + 2 x 12 像素），并将列的宽度扩展为 160。