html - 奇数行和偶数行不同的div算吗？

Question

我这里有一个 fiddle - https://jsfiddle.net/x18qLnfx/ 如何使用 nth-child(odd) 和 nth-child(even) 在奇数行上制作 3 个相同宽度的 div，在偶数行上制作 4 个相同宽度的 div？

Answer 1

解决方案一:

这可以解决问题，在每 7n 个格(7、14、21 ...)上添加 25% 的 margin-right 以占据整个空间，因此这一行只有 3 个格:

.wrapper>div:nth-child(7n) {
  margin-right: 25%;
}

.wrapper>div {
  padding: 0;
  margin: 0;
}

.wrapper>div {
  width: 25%;
  background: red;
  display: inline-block;
  border: 1px solid green;
  box-sizing: border-box;
}

.wrapper>div:nth-child(7n) {
  margin-right: 25%;
}

<div class="wrapper">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipis icing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div><div>Lorem ipsum dolor sit amet, consectetur adipis icing elit. Saepe laboriosam nisi deserunt nesciunt culpa maxime aliquid perspiciatis, officiis! Veritatis temporibus minus reprehenderit consectetur sunt, omnis totam laboriosam mollitia? Eos, repellendus.</div>
</div>

方案二(等宽):

.wrapper>div:nth-child(7n + 7) with width: calc(100%/3) 你可以控制不同的行，每 7 div 将它们分组，对于组中的第 5 个、第 6 个、第 7 个，你将宽度设置为 100%/3，其余为 25%，因此具有以下效果:

.wrapper>div {
  padding: 0;
  margin: 0;
}

.wrapper>div {
  width: 25%;
  height: 100px;
  background: red;
  display: inline-block;
  border: 1px solid green;
  box-sizing: border-box;
}
.wrapper>div:nth-child(7n + 5),
.wrapper>div:nth-child(7n + 6),
.wrapper>div:nth-child(7n + 7) {
  width: calc(100% / 3);
}

<div class="wrapper">
<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>