html - 使用 :nth-child properly 打断 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>