CSS3 multiple columns
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">
生長(zhǎng)在非洲荒漠地帶的依米花，默默無(wú)聞，少有人注意過(guò)它。許多旅人以為它只是一株草而已。但是，它會(huì)在一生中的某個(gè)清晨突然綻放出美麗的花朵。
那是無(wú)比絢麗的一朵花，似乎要占盡人世間所有色彩一樣。它的花瓣兒呈蓮葉狀兒，每瓣自成一色：紅、白、黃、藍(lán)，與非洲大地上空的毒日爭(zhēng)艷。
但是，它的花期很短，最多只有兩天。兩天后它就會(huì)隨著母株一起枯萎，開(kāi)花意味著它的生命的終結(jié)。
</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中文網(wǎng)(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">
在非洲的荒漠地帶，植物的生長(zhǎng)需要水分，而開(kāi)花的植物對(duì)水分的需求更大。
非洲一般植物都有龐大的根系采水，以供自身的水分需求。但是依米花沒(méi)有根系，
它只有惟一的一條主根，孤獨(dú)地蜿蜒盤曲著鉆入地底深處，尋找有水的地方。
那需要幸運(yùn)和頑強(qiáng)努力，一株依米花往往需要四至五年的時(shí)間在干燥的沙漠里尋找水源，然后一點(diǎn)點(diǎn)積聚養(yǎng)分，
在完成蓓蕾所需要的全部養(yǎng)分后，它開(kāi)花了！所以在它最美麗的時(shí)候，它因耗盡了自己的所有的養(yǎng)分而凋零。
</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
