JQuery Isotope - 将边距应用于元素的最佳方法是什么？

Question

我想对我的isotoped元素应用完美的边距。问题是，当我向我的元素声明类似的东西时：

CSS

#container .elements{
    margin-bottom: 20px;
    margin-left: 1%;
    margin-right: 1%;
    width: 23%;
}

JS

 $container.isotope({
      itemSelector: '.elements',
      layoutMode: 'fitRows'
 });

容器的左右两侧有不受欢迎的边距：

我该如何解决这个问题？

Answer 1

您可以使用左右边距为

的容器来实现此目的

#container {
 margin-left: -1%;
 margin-right: -1%;
}

Answer 2

一种方法是平衡内边距和容器边距：

#container .elements{
 margin-bottom: 20px;
 //margin-left: 1%;
 margin-right: 1%;
 width: 23%;
}

#container {
  margin-left:1%;
}

另一种方法是创建自己的lastelement类并将其应用于每行的最后一个元素：

#container .elements.lastelement {
  margin-right:0;
}

Answer 3

另一个解决方案可能是从每行的第一个元素中移除左边距。

您可以使用 nth-child selector 。

来完成此操作

您的代码变为：

#container .elements {
    margin-bottom: 20px;
    margin-left: 2%
    width: 24%;
}

#container .elements:nth-child(4n+1) {
    margin-left: 0%;
}

请注意，为了简单起见，我重新计算了保证金。