本文介绍了CSS3的多列布局特性，包括容器的column-width、column-count、columns属性，以及项目元素的column-span属性。详细讲解了列宽计算、列间距、列边框和列高度平衡的概念，并提供代码示例。由于浏览器兼容性问题，建议使用时添加兼容写法。
真是。。学如逆水行舟，不进则退。很多东西以前看过，但是不用过了一段时间就忘记了。。再次看一遍并且记下，再次加深印象吧。
容器的属性
column-width: auto | < length > 。给列定义一个最小宽度（min-width）。
- auto: 列宽由其他元素决定。
- length: 显式设置最小宽度。
column-count: auto | < integer >定义列的数量。
- auto: 元素只有一列。就像没有设置一样。
- < integer >: 正整数值。取值是大于0的整数，负值无效。
columns: < column-width > || < column-count >。是column-width和column-count的简写。次序随意。
列宽 = （ 父元素宽度 - （列数-1） 列间隙 ） / 列数*
比如：父元素40em，分为4列，列间隙为2em。那么列宽为（ 40 - （4-1） * 2） / 4 = 8.5em。
如果显式设置的列宽小于这个宽度，它会以这个宽度展示。
如果显式设置的列宽大于这个宽度，它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。
column-gap: normal | < length >。定义列间距。值过大时会撑破布局。
- normal: 默认值，由浏览器解析，一般是lem。
- < length >: 有浮点数字和单位标识符组成的长度值。如：2.1em。
column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >。定义列边框。
它的中心线始终和列间距的中心线一样。换言之，它总处于两列的中间。和border类似。如果列边框大于列间距，并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样（背景效果）。
column-fill: auto | balance。定义多列中每一列的高度是否统一。
这个属性很奇怪。并且在浏览器中不统一。它有两个值：auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的，发现这两个属性并没有区别。在firefox49中测试，这两个属性是有区别的，其中balance是每列高度差不多（对齐），auto就自动合并成一列了，无论自己设置的是多少列。
项目（元素）的属性
column-span: none | all。定义一个元素横跨多少列。
如果我们常将标题横跨所有列。那么，column-span: all。其默认值是，column-span: none；表示不跨列。
代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
最低0.47元/天 解锁文章
扫一扫
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
