CSS3多列布局可以自动将内容按指定的列数排列,它实现了和报纸、杂志排版非常相似的布局效果。
一、CSS3多列布局核心属性:
1、columns:集成column-width和column-count两个属性。
2、column-width:定义每列列宽度
3、column-count:定义分列列数
4、column-gap:定义列间距
5、column-rule:定义列边框
6、column-span:定义多列布局中子元素跨列效果
7、column-fill:控制每列的列高度。
二、浏览器兼容性,需要加前缀。具体使用形式:(以columns属性为例,其他的属性使用方式与此相同)
-moz-columns: 9em 4;
-webkit-columns:9em 4;
columns:9em 4;
三、各个属性介绍:
1、column-width:定义每列列宽度,取值:
(1)auto:默认值,则列宽将由其他属性来决定,如column-count。且为auto时,只有配合其他属性一起使用才有效果。
(2)<length>:长度值,不能为负值。
2、column-count:指定列数(可以认为其指定了最大列数,当总宽度不够时,实现效果的列数可能为小于指定的列数),取值:
(1)auto:默认值,表示元素只有一列,其主要依靠浏览器计算自动设置。
(2)<integer>:正整数,为大于0的正整数。
3、column-gap:定义列间距,取值为normal(一般相当于1em)和长度值(不能为负值)
4、column-rule:定义列边框。
(1)它和块框的border属性很相似,也接收三个空格分开的值,分别表示宽度、样式和颜色。例如:、
-moz-column-rule:2px dashed #ccc
-webkit-column-rule:2px dashed #ccc
column-rule:2px dashed #ccc
(2)其宽度并不影响列的布局,它不占据任何空间位置,其在Z轴上介于background和content之间,其宽度大到超过列间距时会自动消失。
5、column-span:跨列属性,用于定义一个分列元素中的子元素能跨多少列,例如让一个标题跨越所有列,取值:
(1)none:默认值,表示不跨越任何列。
(2)all:表示元素跨越所有列,并定位在列的Z轴之上。
6、colum-fill:主要用于定义多列中每一列的高度是否统一,取值:
(1)auto:默认值,各列的高度随其内容的变化而变化。
(2)balance:各列的高度将会根据内容最多的一列的高度进行统一。