多列布局：

多列布局的相关CSS属性
1.column-count 设置列数column-count: 2;
默认值：auto根据 column-width 自定分配宽度
column-width 设置每列的宽度（类似于最小宽度）
默认值：auto根据 column-count自定分配宽度
column-width: 200px;
指定列宽，注意列之间有间距，分好之后每列的宽度不一定是写的列宽，浏览器只是根据设置的列宽决定分几列。
columns 设置的列数和每列的宽度。复合属性columns: 200px 3;
如果同时写了几个属性，谁分的列数少，按谁的分。
2.column-gap 设置列与列之间的间隙。
normal： 与 font-size 大小相同。假设该对象的font-size为16px，则normal值为16px，以此类推。
length ： 用长度值来定义列与列之间的间隙。不允许负值 。column-gap: 20px;
3.column-rule-width 列与列之间的边框厚度
column-rule-style 列与列之间的边框样式
column-rule-color 列与列之间的边框颜色
column-rule 复合属性,列与列之间的边框
column-rule: 1px solid #ccc;
4.column-span 对象元素是否横跨所有列，主要设置标题横跨所有列
none： 不跨列 (默认值)
all： 横跨所有列
column-span: all;text-align: center;标题横跨所有列并居中
5.column-break-before 对象之前是否断行
auto： 既不强迫也不禁止在元素之前断行并产生新列 (默认)
always： 总是在元素之前断行并产生新列
avoid： 避免在元素之前断行并产生新列
-webkit-column-break-before: always;
此段落会新开一列去显示。
6.column-break-after 对象之后是否断行
auto： 既不强迫也不禁止在元素之后断行并产生新列
always： 总是在元素之后断行并产生新列
avoid： 避免在元素之后断行并产生新列
-webkit-column-break-after: always;
此段落后面的一段会新开一列去显示。
7.column-break-inside 对象内部是否断行
auto： 既不强迫也不禁止在元素内部断行并产生新列 (默认)
avoid： 避免在元素内部断行并产生新列
-webkit-column-break-inside: avoid;
一段文字，一列显示不下，就会显示到另外一列上去。如果设置为avoid，这段文字就显示在一列。
8.column-fill 所有列的高度是否统一。只有个别浏览器兼容，兼容性很差。
auto： 列高度自适应内容 (默认)
balance： 所有列的高度以其中最高的一列统一
案例：实现多列图片(瀑布流)
用column-count设置列数，此时图片未完全显示。然后再给每张图片设置width:100%;即可实现。