:first-child
和:last-child
之外,对于nth-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>
答案 0 :(得分: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 */}
答案 1 :(得分:1)
我的标记略有不同(final result):
<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%;
}
这给了我概念图中呈现的布局。