CSS:计算元素并自动添加x个元素后添加分隔符？

Question

我正在尝试使用CSS创建响应式布局.

基本上,我需要知道是否可以计算元素,当它达到x量时,然后在元素后面添加一个分隔符.

为了更好地解释这一点,我创建了这个FIDDLE

正如你所看到的,我有一个带有类名的元素,.divider它位于第5个.beers元素之后.

如何.divider在每个5号后显示元素.beers？

我希望这是有道理的,有人可以帮助我.

提前致谢.

我的CSS:

.wrapper{
width:100%;
}

.content{
width:960px;
height:500px;

}

.beers{
position: relative;
width: 166px;
display:inline-block;
margin-right: 5px;
height: 107px;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
border: 1px dotted #e46a10;
}

.divider{

  display: block;
border-bottom: 1px dotted #ccc;
margin-bottom: 20px;
}

Answer 1

有一种技巧方法可以做到这一点,并且需要巧妙地使用伪元素.您可以将分隔符样式移动到.beers::after伪元素中,并定位每个:nth-child(5n)类.它看起来像这样:

.beers {
  position: relative;
  width: 166px;
  display:inline-block;
  margin-right: 5px;
  height: 107px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  border: 1px dotted #e46a10;
}

.beers:nth-child(5n)::after {
  display: block;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 20px;
  content: "";
}

编辑:仔细检查你的代码后,你的啤酒似乎是内联块元素,并且你希望分离能够每隔5个分解它们.所以尽管这是一个聪明的技巧,但它可能无法给你带来理想的效果.