3

2 つのリスト要素の各グループの後に改行を挿入するにはどうすればよいですか? 必ずしも HTML である必要はありませんが<br />、次の 2 つの要素を次の行に移動するためのものです。ここでは (jQuery 経由で) CSS/3 を完全に使用しようとしています。

HTML:

<div id="headline_gallery">
    <ul>
        <li><img src="images/picture1.png" alt="picture1" /></li>
        <li><img src="images/picture2.png" alt="picture2" /></li>
        <li><img src="images/picture3.png" alt="picture3" /></li>
        <li><img src="images/picture4.png" alt="picture4" /></li>
    </ul>
</div>

CSS:

#headline_gallery li:nth-child(4n),#headline_gallery  li:nth-child(4n-1) {
    background:red;
    display:inline;
}

#headline_gallery li:nth-child(4n-2),#headline_gallery  li:nth-child(4n-3) {
    background:blue;
display:inline;
}
4

2 に答える 2

2

LI を左にフロートさせ、1 秒ごとにクリアします。

#headline_gallery li {
    float: left;
}
#headline_gallery li:nth-child(2n + 1) {
    clear: left;
}

デモ

于 2013-05-15T09:25:14.717 に答える