正确使用：nth-​​child打破div

Question

我想将div叠加在一起，并在三个子元素之后打破div。

示例HTML：

<div class="wrap">
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
</div>

CSS：

.wrap a {
   float:left;
}

.wrap a:nth-child(4n) {
   clear:left;
}

见jsFiddle。第一行显示正常，3个子div彼此相邻。 但是第二行有4个div，它应该有3.我怎么能这样才能使用:nth-child正确地将3个div叠加在一起？

Answer 1

使用nth-child(3n+1)：

.wrap a {
   float:left;
}

.wrap a:nth-child(3n+1) {
   clear:left;
}

<div class="wrap">
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
</div>

Answer 2

解释：使用公式(an + b)。说明：a represents周期大小，n是计数器(starts at 0)，b是偏移值。

.wrap a {
   float:left;
}

.wrap a:nth-child(3n+1) {
   clear:left;
}

<div class="wrap">
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
  <a> hello </a>
</div>