css多列布局不同宽度,浅谈CSS3多列布局

相信大家都看过报纸，报纸上的内容大多数都是分栏显示的，如下图所示：

对于前端攻城狮来说，这种分列布局，在以前虽然可以实现，可是难度却是不小，工作量很大，必须使用JavaScript对内容分段，再配合上绝对定位或浮动等CSS样式来实现多列布局。但现在，强大的CSS3为我们提供了“multi-column”，让我们可以很轻松的实现这样的分列布局。

先来看看与多列布局(multi-column)相关的css属性有哪些：

列数和列宽：column-count、column-width、columns

列的间距和分列样式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule

跨越列：column-span

填充列：column-fill

分栏符：column-break-before、column-break-after、column-break-inside

整体看一下这些属性对应的位置：

1、列数和列宽

1.1 列数(column-count)

column-count：用来指定一个多列元素的列数。

语法：

column-count: auto || number

auto是column-count的默认值，当设置为auto时，元素分栏由其他属性决定，比如后面要讲的column-width；它还可以是任何正整数数字，不能带单位，用来表示多列布局的列数。

需要注意的是，在Firefox和Webkit下还是需要各自的私有属性：-moz和-webkit，正确的兼容写法：

-moz-column-count: auto || number;

-webkit-column-count: auto || number