在一组 CSS 伪类之后添加换行符答案

【问题标题】：Add a line break after group of CSS pseudoclasses在一组 CSS 伪类之后添加换行符
【发布时间】：2013-05-09 19:07:57
【问题描述】：

如何在每组两个列表元素之后插入换行符？它不一定需要是 HTML <br />，而只是将接下来的两个元素移动到下一行的东西。尝试在这里完全使用 CSS/3（通过 jQuery）。

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;
}

【问题讨论】：

标签： css html-lists line-breaks pseudo-class

【解决方案1】：

我会使用好的旧浮点数和第 n 个子选择器

http://jsfiddle.net/QCcca/

li {
    float: left;
}
li:nth-child(odd) {
    clear: left;
}

【讨论】：

【解决方案2】：

将 LI 向左浮动，然后每秒清除一次：

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

Demo

【讨论】：