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

Question

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

该插件工作正常，但是我在创建布局时遇到问题，我使用 nth-child() 选择器来消除每三个元素上的 margin-right 。

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

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

由于这个小部件的容器宽度正好是 1068 像素，因此三个小部件完美契合（因为最后一个小部件没有右边距）。

当我尝试使用 jquery masonry 插件时，此行为被忽略！只有两列适合。（该插件有效，因此所有小部件都以砌体样式浮动。）当我检查元素时，每三个元素的右边距也为 24px。所以第 n 个孩子被忽略。

有什么办法让它发挥作用吗？

Answer 1

使用 jQuery，删除边距并在其位置使用 Masonry 的 gutterWidth 选项。

CSS：

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

jQuery：

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

Answer 2

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

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