我需要幫助關於第n個孩子的

Question

與第n個孩子比:first-child和:last-child從來沒有好，其他的，但我需要一些幫助創建這種類型的佈局：

每一個「後」將成爲包裹在一個名爲.summary-item的類中。我正在使用流體佈局，並將我的網站的內容寬度設置爲max-width: 1020px。

任何人都可以幫助我嗎？非常感激！

<div class="summary-item"> 
First Post 
</div> 

<div class="summary-item"> 
Second 
</div> 

<div class="summary-item"> 
Third 
</div> 

<div class="summary-item"> 
Fourth 
</div> 

<div class="summary-item"> 
Fifth 
</div> 

Answer 1

我稍有不同的標記（final result）去

article { 
    height: 10em; 
    box-sizing: border-box; 
    border: 5px solid #FFF; 
} 

article:nth-child(5n+1) { 
    width: 70%; 
} 

article:nth-child(5n+2) { 
    width: 30%; 
    margin: -10em 0 0 70%; 
} 

article:nth-child(5n+3) { 
    width: 50%; 
} 

article:nth-child(5n+4) { 
    width: 50%; 
    margin-right: 50%; 
} 

article:nth-child(5n+5) { 
    width: 50%; 
    height: 20em; 
    margin: -20em 0 0 50%; 
} 

它可以給我介紹的佈局你的概念圖像。

小提琴：http://jsfiddle.net/ZLVV2/2/

Answer 2

既然你有一段5（「一旦第五後完成我需要整個結構重複」），你的所有nth-child通話將根據5n。之後，它只是另外：

<article> 
    <header> 
     <h3>First Post</h3> 
    </header> 
</article> 
<!-- fill in the gap --> 
<article> 
    <header> 
     <h3>Fifth Post</h3> 
    </header> 
</article>​ 

如下規則：

:nth-child(5n+1) {/* first block */} 
:nth-child(5n+2) {/* second block */} 
:nth-child(5n+3) {/* third block */} 
:nth-child(5n+4) {/* fourth block */} 
:nth-child(5n+5) {/* fifth block - could also be :nth-child(5n) 
          but the +5 improves readability */}