CSS框宽度交替排列

Question

我试图将两个不同宽度值中的一个（70％或30％）应用到连续的第一个或第二个框中。

• 在第一行中，我希望第一个框为70％，第二个框为30％宽。
• 在下一行中，我想要相反。
• 然后下一行应该模仿第一行。
• 这些框是浮动的<li>元素。

我确定可以通过nth-child以某种方式做到这一点...

我想通过CSS 完成此。这是我尝试完成的模型：

Answer 1

很简单，你希望每第4个盒子的第1个和第4个盒子宽70％，每个第4个盒子的第2个和第3个盒子宽30％。

div>div {
  width: 30%;
  height: 20px;
  background-color: blue;
  float: left;
  box-sizing: border-box;
  border: 3px solid #fff
}

div>div:nth-child(4n+1),
div>div:nth-child(4n+4) {
  width: 70%;
  background-color: red;
}

<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></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></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>