Question

我有一个包含2个div的部分，并为其分配了以下类。在彩色图像DIV中，我一个接一个地显示图像（根据所设置的滤波器，存在不同数量的图像）。所有图像都是相同的大小，因此5将适合一行，然后换行到下一行。在每张图片之后，如您所见，我的右边距为20px。但是，我想在每个第5张图像之后没有右边距。我们的想法是让图像填充它们所在的DIV的整个宽度。

DIV部分

.l-colorbook-detail {
  *zoom: 1;
  max-width: 75.5em;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

colorbook images div

.colorbook-images {
  width: 80.0%;
  float: left;
  margin-right: 0.0%;
  border:thin ;
  border-color: #CC0033 ;
  border-style:double;  
}
.l-colorbook-detail:after {
  content: "";
  display: table;
  clear: both;
}

导航的第二个DIV

.colorbook-filters {
  width: 18.0%;
  float: right;
  margin-right: 0;
  border:thin ;
  border-color:#0033FF ;
  border-style:double;
}

最后是图像本身的CSS。

.colorbook-color-guide__color-option {
  width: 172px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

Answer 1

您可以通过margin-right伪类在每5张图片上级联:nth-child

.colorbook-images img:nth-child(5n) {
  margin-right: 0;
}

或者您可以为margin-right以外的每个图像设置:nth-child(5n)（链接:not伪类）

.colorbook-images img:not:nth-child(5n) {
  margin-right: 20px;
}

Answer 2

您可以使用nth-of-type伪选择器来执行此操作。

image.nth-of-type(5){
    margin-right: 0px;
}

http://www.w3schools.com/cssref/sel_nth-child.asp

这比使用其他答案中建议的nth-child更好，这样您就可以添加标题等，而无需更改它。

CSS每第5张图片后没有边距

2 个答案: