Question

我正在尝试构建一个div个width遵循特定模式的网格。在网格中，前3个div应该将width作为33.333%，接下来的2个应该width作为50%，接下来的3个width: 33.3333%后跟width: 50%下一个2与nth-child等等（无限）。

CSS3 :nth-child似乎非常适合这种情况，但无论我做什么，都会将其作为编号，因为我必须使用width两次。这必须以巧妙的CSS方式解决？有没有一种方法可以根据这种模式分配width，而无需为每个div逐个手动设置-vvv？

Answer 1

从您的问题来看，似乎每5个元素中你需要前3个元素，width为33.33％，接下来的两个元素为width为50％。

因此，您应使用nth-child乘数作为5n。每组五个中的前三个元素将是5n-4，5n-3，5n-2，而接下来的两个元素将是5n-1和5n。在nth-child选择器中使用这些，如下面的代码段所示，可以实现您的目标。

div {
  float: left;
  height: 50px;
  border: 1px solid;
}
div:nth-child(5n-4),
div:nth-child(5n-3),
div:nth-child(5n-2) {
  width: 33.33%;
}
div:nth-child(5n-1),
div:nth-child(5n) {
  width: 50%;
}
* {
  box-sizing: border-box;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

正如Abhitalks in comments所指出的，可以通过将width之一设置为所有div元素的默认值然后覆盖它来进一步简化。例如，我们可以将width: 33.33%设置为所有div元素的默认值，然后将其覆盖为width: 50%，仅适用于5n和5n-1。

div {
  float: left;
  height: 50px;
  width: 33.33%;
  border: 1px solid;
}
div:nth-child(5n-1),
div:nth-child(5n) {
  width: 50%;
}
* {
  box-sizing: border-box;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

成对选择第n个孩子（重复模式）？

1 个答案: