正确使用 :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 个。我怎样才能做到只有 3 个 div 正确使用 :nth-child 并排堆叠？

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>

正确使用 :nth-child 打破 div

Break divs by using :nth-child properly

html

css

css-float