为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。
一、多列布局columns
语法:
columns:<column-width> || <column-count>
column-width:主要用来定义多列中每列的宽度
column-count:主要用来定义多列中的列数
兼容性:到目前为止大部分主流浏览器都对其支持:
二、列宽column-width
column-width的使用和CSS中的width属性一样,不过不同的是,column-width属性在定义元素列宽的时候,既可以单独使用,也可以和多列属性中其他属性配合使用。其基本语法如下所示 ;
column-width: auto | <length>
auto:如果column-width设置值为auto或者没有显式的设置值时,元素多列的列宽将由其他属性来决定
三、列数column-count
column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则:
column-count:auto | <integer>
auto:此值为column-count的默认值
integer:列数
四、列间距column-gap
column-gap主要用来设置列与列之间的间距,其语法规则如下:
column-gap: normal || <length>
取值说明:
normal:默认值,默值为1em(如果你的字号是px,其默认值为你的font-size值)。
length:此值用来设置列与列之间的距离,其可以使用px,em单位的任何整数值。
五、列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说,就有点类似于常用的border属性。但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。
语法规则:
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
取值说明:
column-rule-width:类似于border-width属性,其默认值为“medium”。
column-rule-style:类似于border-style属性,其默认值为“none”。
column-rule-color:类似于border-color属性,其默认值为前景色color的值。
六、跨列设置column-span
column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列,不管里面元素如何排放顺序,他们都是从左向右的放置内容,但有时我们需要其中一段内容或一个标题不进行分列,也就是横跨所有列,column-span就可以实现,此属性的语法如下。
column-span: none | all
取值说明:
none:默认值,表示不跨越任何列。
all:这个值跟none值刚好相反,表示的是元素跨越所有列,并定位在列的Z轴之上。
七、填充列column-fill
浏览器支持:主流浏览器都不支持 column-fill 属性。
语法:
column-fill: balance|auto;
balance:对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto:按顺序对列进行填充,列长度会各有不同。