前言
CSS3的多列布局(multi-column)，主要用来实现文本的多列布局，类似于报刊杂志的排版。之前要实现文字的多列排版是非常麻烦的(手动拆分，绝对定位，JS脚本)，但是有了多列布就显得轻松多了。
兼容性：IE10、firefox、chrome、opera、safari
相关属性
1、column-count：设置multi的列数。
取值：
①、auto：默认值，列数由column-width决定。
②、数字：正整数
2、column-width：设置multi的列宽。
取值：
①、auto：默认值，列数由column-count决定。
②、宽度：宽度值
NOTE：当同时设置column-count和column-width时，列数由column-count决定。
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>multi-column</title> 6 <style> 7 body, p { 8 margin: 0; 9 padding: 0; 10 font: 12px/1.5 "Microsoft YaHei"; 11 } 12 .wrap { 13 -webkit-column-count: 2; 14 -webkit-column-width: 100px; 15 16 background: pink; 17 width: 500px; 18 margin: 50px auto; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="wrap"> 24 <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> 25 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p> 26 <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p> 27 </div> 28 </body> 29 </html>
3、columns：同时设置multi的列宽和列数。
取值：
①、列宽和列数：参考 column-width 和 column-count
4、column-gap：设置列之间的间距。
取值：
①、normal：和font-size相同
②、宽度：宽度值(不能取负值)
NOTE：
在同时设置了 column-width 和 column-gap 后column-width的值会动态调整。
在同时设置了 column-width 和 column-count column-gap后，会保证gap值，后动态调整width和count(当gap+width超过了列最大宽度，count会相应减少来适应)。
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>multi-column</title> 6 <style> 7 body, p { 8 margin: 0; 9 padding: 0; 10 font: 12px/1.5 "Microsoft YaHei"; 11 } 12 .wrap { 13 -webkit-column-count: 3; 14 -webkit-column-width: 150px; 15 -webkit-column-gap: 100px; 16 background: pink; 17 width: 500px; 18 margin: 50px auto; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="wrap"> 24 <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> 25 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p> 26 <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p> 27 </div> 28 </body> 29 </html>
5、column-rule：设置列与列之间的边框，边框会以gap的中心向两边扩散可到内容区域。
取值：
复合属性，参考border。
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>multi-column</title> 6 <style> 7 body, p { 8 margin: 0; 9 padding: 0; 10 font: 12px/1.5 "Microsoft YaHei"; 11 } 12 .wrap { 13 -webkit-column-count: 3; 14 -webkit-column-width: 140px; 15 -webkit-column-gap: 40px; 16 -webkit-column-rule: 100px solid #CCC; 17 background: pink; 18 width: 500px; 19 margin: 50px auto; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="wrap"> 25 <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> 26 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p> 27 <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p> 28 </div> 29 </body> 30 </html>
6、column-span：定义分列元素的子元素能跨多少列。
取值：
①、none：默认值，不跨列
②、all：跨越所有列
NOTE：gap不会出现在跨越所有列的子元素上。
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>multi-column</title> 6 <style> 7 body, p { 8 margin: 0; 9 padding: 0; 10 font: 12px/1.5 "Microsoft YaHei"; 11 } 12 .wrap { 13 -webkit-column-count: 3; 14 -webkit-column-width: 140px; 15 -webkit-column-gap: 40px; 16 -webkit-column-rule: 10px solid #CCC; 17 background: pink; 18 width: 500px; 19 margin: 50px auto; 20 } 21 h1 { 22 -webkit-column-span: all; 23 text-align: center; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="wrap"> 29 <h1>出师表</h1> 30 <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> 31 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p> 32 <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p> 33 </div> 34 </body> 35 </html>
NOTE：跨列子元素在子元素的中间的表现如下。
1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>multi-column</title> 6 <style> 7 body, p { 8 margin: 0; 9 padding: 0; 10 font: 12px/1.5 "Microsoft YaHei"; 11 } 12 .wrap { 13 -webkit-column-count: 3; 14 -webkit-column-width: 140px; 15 -webkit-column-gap: 40px; 16 -webkit-column-rule: 10px solid #CCC; 17 background: pink; 18 width: 500px; 19 margin: 50px auto; 20 } 21 h1 { 22 -webkit-column-span: all; 23 text-align: center; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="wrap"> 29 <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p> 30 31 <h1>出师表</h1> 32 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p> 33 <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p> 34 </div> 35 </body> 36 </html>
7、column-break-after：确定分栏符是否可以或应该发生在多列布局中的一个元素后
8、column-break-before：确定一个分栏符是否可以或者应该发生在多列布局中的一个元素前
9、column-break-inside：确定一个分栏符是否避免在一个多流布局内部断开