0

:first-childと以外のn番目の子では決してうまくいきませんでした:last-childが、このタイプのレイアウトを作成するのに助けが必要です。

レイアウト例

各「投稿」は、。というクラスのdivでラップされ.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>
4

2 に答える 2

1

わずかに異なるマークアップを使用しました（最終結果）：

<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/

于 2012-12-12T02:06:36.500 に答える
1

期間が 5 であるため (「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 */}
于 2012-12-12T01:37:03.357 に答える