如何在每组两个列表元素之后插入换行符?它不一定需要是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;
}
答案 0 :(得分:7)
我会使用好的旧浮点数和第n个子选择器
li {
float: left;
}
li:nth-child(odd) {
clear: left;
}
答案 1 :(得分:1)
将LI向左漂浮,然后在每秒后清除:
#headline_gallery li {
float: left;
}
#headline_gallery li:nth-child(2n + 1) {
clear: left;
}