風格每3個網格佈局中的元素與：nth-​​

Question

我似乎無法弄清楚這一點，下面是我想要實現的網格佈局的圖像。

到目前爲止，我已經是如何將前兩排具有以下目標：

.list { 
    float: left; 
    width: 33%; 
} 

.list:nth-child(-n+2), .list:nth-child(5n+1) { 
    width: 50%; 
} 

<div class="list"></div> 

這開始了OK，但開始由第三排土崩瓦解。有關如何實現這一點的任何想法？

http://www.mythemer.com/wp-content/uploads/2013/12/grid-style.png

Answer 1

.list { 
    float: left; 
    width: 50%; 
} 
.list:nth-child(5n+3), .list:nth-child(5n+4), .list:nth-child(5n) { 
    width: 33%; 
}