4

我正在尝试使用很棒的 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 被忽略。

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

4

2 回答 2

10

使用 jQuery，删除边距并使用Masonry 的 gutterWidth 选项代替它。

CSS：

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

jQuery：

$('#footerwidgets').masonry({
  gutterWidth: 24
});
于 2011-12-03T03:28:17.257 回答
1

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

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

于 2011-03-08T21:35:11.433 回答