CSS3多列布局

常用于布局的大概有浮动float、行内块inline-block、定位position几种方式，但这几种布局多少有些不足之处，例如排版报纸或杂志类的多列布局，无法根据内容变化动态地改变布局。

1.多列布局属性简介：

columns:(包含了column-width和column-count两个属性)

column-gap：定义列间距；

column-rule：定义列边框；

column-span：定义多列布局中的子元素跨列效果；

column-fill：控制每列的列高效果，以内容多的列高为准。

2.列宽属性:column-width

column-width:auto|<length>;//相当于给列定义一个最小宽度(min-width)

注意：

列宽column-width设置为auto时，需要配合多列的其他属性才能有分列效果。

列宽column-width可以配合其他多列布局属性使用，比如设置列数、列间距等，也可以单独使用：当容器超出列宽时，会以多列显示；反之容器小于设置的列宽时，容器将显示为一列。

浏览器根据列宽和列间距计算列数：

（容器宽度-列与列间距）/列宽=列数

(40em-2em)/10em=38em/10em=3.8 //然后浏览器去余取整，取为3列

当内容撑破容器时，列数-1显示，由浏览器自动计算。

3.列数属性：column-count

指定列数和允许的最大列数！

column-count:auto|<integer>

注意：在前面公式计算出列数为3列之后，如果显示设置column-count为4列，显示效果却还是浏览器计算出来的列数，为3列，而不是4列显示！

4.列间距属性：column-gap

相当于两列之间的空白间隔，只存在于相邻两列之间！

column-gap:normal|<length>;

5.列边框样式属性:column-rule

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>;

注意：

column-rule-width增大不会影响列布局，不占任何空间位置；

column-rule在Z轴上介于background和content之间。column-rule-width宽度增加到列间距大小甚至超过时，列边框也不会消失。

6.跨列属性：column-span

用来定义一个分列元素中的子元素能跨列多少。多用于标题等进行跨列居中显示效果。

column-span:none|all;//用于子元素

7.列高度属性:column-fill

最后列往往没有足够的内容进行填充，无法达到让所有列都具有相同的高度效果，column-fill可以统一高度。

column-fill:auto|balance;
//balance会根据内容最多的一列的高度进行统一

总结：

要达到类似于报纸或杂志的排版效果，无需增加无用的标签或依赖于浮动或定位来实现布局效果。熟悉使用列宽column-width、列数column-count、列间距column-gap、列边框column-rule、跨列column-span和列高度column-fill等六大属性进行排版布局，解决此等排版难题。