Question

最初我想完成以下layout。这只是一个模型。关键 - 最终布局应该是在Wordpress中，而不是彩色背景，应该从媒体库中提取图像。

基本上它是一个文章列表（随着时间的推移，它们可以增加或减少数量）。因此，我一直在寻找一个涵盖案例的自动化CSS解决方案。但到目前为止，我无法想到一个n-child代码同时捕获所有1/3个案例而另一个同时捕获2/3个案例。两种情况都不稳定。所以我想出了idea每个盒子类型有两个n个孩子的案例。这是一个有效的解决方案还是有改进的空间，让事情更优雅？

最好的问候拉尔夫

Answer 1

使用

article:nth-child(4n+1) instead of .onethirdLeft
article:nth-child(4n+2) instead of .twothirdRight
article:nth-child(4n+3) instead of .twothirdLeft
article:nth-child(4n) instead of .onethirdRight

示例：http://codepen.io/anon/pen/tqKpz

如何正确布置两个不稳定的交替箱尺寸（宽度的1/3和2/3）？

1 个答案: