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

How can I get a line break to be inserted after each group of two list elements? It doesn't necessarily need to be a HTML <br />, but just something to move the next two elements to the next line. Attemtping to entirely use CSS/3 here (over jQuery).

如何在每组两个列表元素之后插入换行符?它不一定需要是HTML
,而只是将接下来的两个元素移动到下一行。决定在这里完全使用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;
}

2 个解决方案

#1

I would use good old float and the n-th child selector

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

http://jsfiddle.net/QCcca/

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

#2

Float the LIs left and then clear after every second:

将剩余的LI漂浮,然后在每秒后清除:

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

Demo

#1