我需要有关nth-child的帮助

Question

对于nth-child来说永远不会好，除了:first-child和:last-child ，但我需要一些帮助来创建这种类型的布局：

每个“post”都将包含在一个名为.summary-item的div中。 我正在使用流畅的布局，并将我的网站内容宽度设置为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

由于你有5个句号（“第五个帖子完成后我需要整个结构重复”），你所有的nth-child电话都将基于5n 。 之后它只是补充：

: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 */}

Answer 2

我的标记略有不同（ 最终结果 ）：

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

以下规则：

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/