一、多列布局

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。

1) columns

语法:

columns:<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数:列宽和列数。

举例:要显示2栏显示,每栏宽度为200px,代码为:

columns: 200px 2;

大部分主流浏览器都支持,但需要添加各个浏览器的私有前缀,如:-moz、-mebkit、-ms、-o 等。

 

2)column-width

column-width的使用和CSS中的width属性一样,不过不同的是,column-width属性在定义元素列宽的时候,既可以单独使用,也可以和