CSS盒子宽度交替排列

Question

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

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

我敢肯定有办法用nth-child莫名其妙地做到这一点...

我想通过CSS做到这一点。这里是什么，我试图完成一个样机：

Answer 1

够简单，你想第一次和每4箱4盒要宽70％，每4个盒子的第二和第三个是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>