解决方案1：

Question

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

Answer 1

解决方案1：

这样就可以了，在每7n div（7,14,21 ......）上添加一个margin-right为25％来占据整个空间所以只有3 div这一行：

.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>

解决方案2（等宽）：

.wrapper>div:nth-child(7n + 7) 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>

Answer 2

假设您希望保留相同的html标记，并且这些div的父级称为.blocks-container，则可以像this那样进行。

＆＃39;奇数＆＃39;甚至＆＃39;甚至＆＃39;没有任何意义，因为你没有行的容器，所以你的定期＆＃39;风格适用于7个孩子而不是2个孩子。我希望你使用某种样式的预处理器，以避免那些长样式的声明。

font-size：0用于处理内联块的标记空间问题。

另外，如果你想保持5px的填充，我会在div中添加第二个元素并将填充添加到该元素，如果你不能这样做，你将需要计算宽度动态元素，因此如果您的div有padding: 5px，则其宽度必须分别为width: calc(25% - 10px)和width: calc(33.33% - 10px)。

.blocks-container div{
  display: inline-block;
  font-size: initial;
}

.blocks-container {
  font-size: 0;
  width: 100%;
}
.blocks-container div:nth-child(7n+1), .blocks-container div:nth-child(7n+2), .blocks-container div:nth-child(7n+3), .blocks-container div:nth-child(7n+4) {
  width: 25%;
  background: green;
}

.blocks-container div:nth-child(7n+5), .blocks-container div:nth-child(7n+6), .blocks-container div:nth-child(7n+7) {
  width: 33.33%;
  background: blue;
}

奇数和偶数行不同的div计数？

2 个答案:

解决方案1：

解决方案2（等宽）：