Question

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

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

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

正如您所看到的，我有一个类名为.divider的元素，它位于第5个.beers元素之后。

如何在每隔5 .divider后显示.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个分解它们。所以虽然这是一个聪明的技巧，但它可能无法给你带来预期的效果。 / p>

Answer 2

我会这样做，因为第6个块将清除第5个，虚线将拉伸内容div宽度。此外，我们将虚线添加到第6个元素的顶部，如果它在最后的第5个元素上结束，则从堆栈底部删除该行。

链接到您更新的小提琴https://jsfiddle.net/onjL7kn4/4/

.wrapper {
  width: 100%;
}

.content {
  width: 960px;
  height: 500px;
}

.beers {
  position: relative;
  width: 166px;
  display: block;
  float: left;
  margin-right: 5px;
  height: 107px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  border: 1px dotted #e46a10;
}


.content > div:nth-of-type(5n+6) {
  clear: left;
}

.content > div:nth-of-type(5n+6):before {
  content: "";
  display: block;
  height: 1px;
  width: 960px;
  border-bottom: 1px dotted #ccc;
  transform: translateY(-12px);
}

<div align="center" class="wrapper">

  <div align="center" class="content">

    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>
    <div class="beers"></div>

  </div>

  <div>

Answer 3

假设您divider课程中的样式是您想要分隔符的唯一效果，您可以使用nth-child并且不必使用任何伪元素：< / p>

＆＃13;

.beers:nth-child(5n) {
  border-bottom: 1px dotted #ccc;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

＆＃13;

<ul>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
</ul>

＆＃13;

编辑以及与inline-block元素兼容的版本（假设每行只有五个元素适合，如果您需要，您可能会有这些元素 - 如果我＆＃39;我错了，花车是要走的路）：

＆＃13;

.beers {
  border-bottom: 1px dotted #ccc;
  display: inline-block;
  margin-bottom: 20px;
  margin-right: -0.25em;
  padding-bottom: 20px;
  width: 20%;
}

＆＃13;

<ul>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
  <li class="beers">Item</li>
</ul>

＆＃13;

Answer 4

万一你找不到任何完美的CSS解决方案，这里的javascript代码 - 纯粹的javascript和jQuery-选择适合你的方式：

纯javascript：jsFiddle 1

release

jQuery：jsFiddle 2

var brs = document.querySelectorAll('.beers');

for (var i = 0; i < brs.length; ++i) {

  if ((i + 1) % 5 == 0) {
    // create the new divider div and add the relative class to it
    var divider = document.createElement('div');
    divider.classList.add('divider');

    //insert the newly created div.divider
    brs[i].parentNode.insertBefore(divider, brs[i].nextSibling);
  }
}

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

4 个答案: