Multi-column layouts (multi-column) CSS3 is strong in emerging expansion of conventional HTML pages block layout mode. This new syntax allows developers to easily make WEB text rendering multi-column display. We know that when a line of text is too long, the reader will read more strenuous, it is possible to read the wrong line or read a serial; people's point of view from one end to another end of the text, and then change to the beginning of the next line, if the eye mobile floating too large, their attention will diminish, easy to read not go. So, for maximum efficiency in the use of large-screen display, the page design need to limit the width of the text, so that the text presented by multiple columns, like publishing news on a newspaper. But before the CSS3 multi-column layout (columns) function syntax appears, if you want the people in a multi-column text display or use absolute positioning, manual points to text paragraphs, or use the JS script, etc., but the emergence of new syntax, completely changed such a situation.
For some do not support multi-column layout features of browsers such as IE9 / IE8, all of these attributes will be ignored, so it presents the layout of a conventional single-block layout. In order to ensure maximum compatibility with browsers, we use multi-column layout properties, it is best to add a prefix browser engine, the most basic to add three types: Google browser -webkit-, Firefox -moz- , IE browser -ms-, finally, do not forget without writing prefix.
There are three columns layout parameters can be set, respectively, as column-width, column-count, column-gap, column-rule, as described in detail in Table 1:
Table 1 CSS3 Columns Layout Parameter Description
And a number of column width
No matter how many columns you want a piece of text was displayed, you need just two properties: column-count and column-width.
(1) using the column-count for an article set two, as follows:
This will make the text in the content is displayed as two (first of your browser to support the new syntax, such as Firefox, Google Chrome, IE10 +, etc.), where we used the column-count compatible browser, html browser to open the file, the effect shown in Figure 1:
Figure 1 column-count columns layout
（2）column-width属性控制列的宽度。如果你没有提供column-count属性值，那么，浏览器就是自主决定将文本分成合适的列数。将上例的CSS代码替换如下：
这将会使文本里的内容被分成若干列，每列的宽度为10em，分栏效果如图2所示：
图2 column-width分栏布局
2 列之间的缝隙间隔宽度
两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em，但如果你使用column-gap属性，就会修改这个缺省的宽度值，将上例的分栏宽度为20em，分栏间隔为2em。将上例的CSS代码替换如下：
这将会使文本里的内容被分成若干列，每列的宽度为20em，分隔间隔为2em，效果如图3所示：
图3 column-gap分栏间隔
3 分栏间隔符
column-rule的语法如下：
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule属性是一个简写属性，用于设置所有column-rule-* 属性。它们的参数及描述如表2：
表2 column-rule参数取值及描述
其中，column-rule-style有以下可选值，它们的取值及描述如表3：
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
表3 column-rule-style参数取值及描述
下面，我们将把文本分为三栏，并给出2em的缝隙间隔，每栏间隔都给一个黑色的虚线间隔符。CSS代码如下：
这将会使文本里的内容被分三列，分隔间隔为2em，分隔符为黑色虚线，效果如图4所示：
图4 column-rule分栏符
CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们，特别是需要自动平衡列高度的地方。