jquery masonry：nth-​​child（）不起作用？

Question

嘿伙计们， 我正在尝试使用令人敬畏的jquery masonry插件 - ＆gt; 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;
}

由于这个小部件的容器正好是1068px宽，所以三个小​​部件完全适合（因为最后一个小部件没有正确的边距）

当我尝试使用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。你最好的选择是使用三列176px。每列的边距为12px，宽度为152px。

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