Ajouter un saut de ligne après un groupe de pseudoclasses CSS

Question

Comment puis-je insérer un saut de ligne après chaque groupe de deux éléments de liste? Il ne doit pas nécessairement être un HTML <br />, mais juste quelque chose pour déplacer les deux éléments suivants à la ligne suivante. Attemtping à utiliser entièrement CSS/3 ici (sur 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; 
} 

Answer 1

J'utiliser un bon vieux flotteur et le sélecteur d'enfant n-ième

http://jsfiddle.net/QCcca/

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

Answer 2

Float LIs gauche puis claire après chaque seconde:

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

Demo