CSS3 Multi-column
CSS3 can design text content into a multi-column layout like a newspaper
The following are the relevant attributes used by column
1.column-width: < length> | auto sets or retrieves the width of each column of the object
For example: -moz-column-width:200px;
2.column-count: <integer> | auto sets or retrieves the column of the object Number
For example: -webkit-column-count:3;
3.column-gap:<length> | normal Sets or retrieves the gap between columns of the object
For example: column-gap:normal;column-gap:40px;
4.column-rule: [ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ] settings Or retrieve the borders between columns of an object. Composite properties. Equivalent to the border attribute
such as: column-rule:10px solid #090;
5.column-span: none | all Sets or retrieves whether the object element spans all columns.
For example: column-span:all;
6.column-fill: auto | balance Sets or retrieves whether the height of all columns of the object is uniform.
auto: Column height adaptive content
balance: The height of all columns is unified with the highest one
For example: column-fill:balance;
7.column-break-before: auto | always | avoid | left | right | page | column | avoid-page | avoid-column Sets or retrieves whether to break lines before an object.
auto: neither forces nor prohibits breaking lines before elements and producing new columns
always: always breaking lines before elements and producing new columns
avoid: avoid breaking lines before elements and producing new columns Column
8.column-break-after: auto | always | avoid | left | right | page | column | avoid-page | avoid-column Whether to break lines after setting or retrieving the object.
auto: neither forces nor prohibits breaking lines after elements and producing new columns
always: always breaking lines after elements and producing new columns
avoid: avoid breaking lines after elements and producing new columns Column
9.column-break-inside: auto | avoid | avoid-page | avoid-column Sets or retrieves whether lines are broken inside the object.
auto: Neither forces nor prohibits line breaking inside elements and creating new columns
avoid: Avoids line breaking inside elements and creating new columns
CSS3 creation Multiple columns
column-count attribute specifies the number of columns to be split.
The following example divides the text in the <div> element into 3 columns
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。
那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。
但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。
</div>
</body>
</html>CSS3 The gap between columns in multiple columns
column-gap attribute specifies the gap between columns.
The following example specifies a gap of 40 pixels between columns
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。
非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系，
它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。
那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分，
在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。
</div>
</body>
</html>CSS3 column border
column-rule The -style attribute specifies the border style between columns
Specifies how many columns the element spans
The following example specifies that the <h2> element spans All columns
Specifies the width of the column
The column-width property specifies the width of the column.
CSS3 multi-column properties
The following table lists all CSS3 multi-column properties:
Properties Description
column-count Specify the number of columns by which the element should be split.
column-fill
column-rule The abbreviation of all column-rule-* properties
column-rule-color ’ ’ ’ ’ ’ ‐ ‐ ‐ ’ s ’ s ’ s ’ s ’ s ’ s with ‐ ‐ ‐ ‐ ‐ d Style
column-rule-width Specifies the thickness of the border between two columns Specify the width of the column
Columns Set the abbreviation of color-width and colorn-count
