多列

通过 CSS3 多列，您能够创建多个列来对文本进行布局实现像报纸那样的效果，或者实现瀑布流

多列容器可设置的属性：

• column-count： 要分成多少列，如 column-count：3

• column-gap: 列与列之间的距离, 如column-gap: 20px

• column-width: 规定列的宽度, 如column-width:300px

  • auto：自动根据浏览器决定列宽

  • Number（px）：设置固定的值

• columns: column-width 和 column-count 的合并简写，规定列的宽度和列数,如 columns: 300px auto

• column-rule: 设置列之间的宽度、样式和颜色规则，也是 column-rule-color , column-rule-style , column-rule-width 的合并写法,如solid 1px red

• column-fill: balanc|auto 规定如何对列进行填充,主流浏览器都不支持 column-fill 属性

多列内子元素可设置的属性：

• column-span: 使元素横跨所有列, 如 colunm-span: all

  • 1: 不跨列

  • all：跨整列

注意项

如果设置了 column-count，则 column-width 应该是自动的 如果同时也设置了 column-width 的值，则他们会产生冲突。

原则：取大优先，谁设定的宽度值大，则谁生效，如果还有剩余空间，会均分给每列，使每列实际宽度大于设置的宽度