css3 定义每行多少个子元素

html-css021

css3 定义每行多少个子元素,第1张

li:nth-child(3n+1){background:orange}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

楼上的都忘了清除浮动了

不清除浮动的话，DIV就不会计算高度，不计算高度的话，

要再往下写东西，就会错位的……

应该这样：

<div style="float:left">一</div>

<div style="float:left">二</div>

<div style="float:left">三</div>

<div style="clear:both">清除浮动</div>/*这个很重要*/

用纯CSS让3个或更多的DIV处于同一行方法：

可以利用float属性实现多个div处于统一行。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

还可以利用display：inline；将div强制转换为内联元素也可实现多个div处于同一行。