css3 - Add a line break after group of CSS pseudoclasses -

how can line break inserted after each group of 2 list elements? doesn't need html <br />, move next 2 elements next line. attemtping entirely use css/3 here (over 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; } 

i use old float , n-th child selector

http://jsfiddle.net/qccca/

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