http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
body { column-width: 15em;/*列宽*/ }
In the above example, the body element is set to have columns at least '15em' wide. The exact number of columns will depend on the available space.The number of columns can also be set explicitly in the style sheet:
body { column-count: 2;/*两列布局*/ }
The shorthand 'columns' property can be used to set both properties in one declaration. The rule in the example below sets the same property/value pairs as the rules in the two examples above:body { columns: 2 15em ;/*缩写*/}
Another group of properties introduced in this module describe gaps and rules between columns. Here is a simple example:body {
column-gap: 1em; /*列空白区*/
column-rule: thin solid black;/*列分割线*/
}
The first declaration in the example above sets the gap between two adjacent columns to be 1em. In the middle of the gap there will be a rule which is described by the 'column-rule' property. The values of the 'column-rule' property are similar to those of the CSS border properties. Like 'border', 'column-rule' is also a compound property. The example above is therefore identical to the one below:column-gap: 1em; /*列空白区*/
column-rule: thin solid black;/*列分割线*/
}
body {
column-gap: 1em; /*列空白区*/
column-rule-width: thin; /*列分割线宽度*/
column-rule-style: solid;/*列分割线样式*/
column-rule-color: black;/*列分割线颜色*/
}
A third group of properties indicate where column breaks should occur:column-gap: 1em; /*列空白区*/
column-rule-width: thin; /*列分割线宽度*/
column-rule-style: solid;/*列分割线样式*/
column-rule-color: black;/*列分割线颜色*/
}
将这种布局的打破，继承等属性
h1 { column-break-before: always; }
h2 { column-break-after: avoid; }
h1, h2 { column-break-inside: avoid; }
这是张关于该类布局的图示 qhtx.net 收录编辑h2 { column-break-after: avoid; }
h1, h2 { column-break-inside: avoid; }
