CSS 3.0关于布局的一些属性VVHBeautyCss.org - 前端教程网
VVHBeautyCss.org - 前端教程网
列出一些例子，看看这些属性是怎么工作的！一些图示去这里看看VVHBeautyCss.org - 前端教程网
VVHBeautyCss.org - 前端教程网
http://www.w3.org/TR/2001/WD-css3-multicol-20010118/ VVHBeautyCss.org - 前端教程网
代码:
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.
VVHBeautyCss.org - 前端教程网VVHBeautyCss.org - 前端教程网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 { VVHBeautyCss.org - 前端教程网
column-gap: 1em; /*列空白区*/VVHBeautyCss.org - 前端教程网
column-rule: thin solid black;/*列分割线*/VVHBeautyCss.org - 前端教程网
}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:
代码:
body { VVHBeautyCss.org - 前端教程网
column-gap: 1em; /*列空白区*/VVHBeautyCss.org - 前端教程网
column-rule-width: thin; /*列分割线宽度*/VVHBeautyCss.org - 前端教程网
column-rule-style: solid;/*列分割线样式*/VVHBeautyCss.org - 前端教程网
column-rule-color: black;/*列分割线颜色*/VVHBeautyCss.org - 前端教程网
}A third group of properties indicate where column breaks should occur:
VVHBeautyCss.org - 前端教程网将这种布局的打破，继承等属性
代码:
h1 { column-break-before: always; }VVHBeautyCss.org - 前端教程网
h2 { column-break-after: avoid; }VVHBeautyCss.org - 前端教程网
h1, h2 { column-break-inside: avoid; }这是张关于该类布局的图示
