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: | auto sets or retrieves the column of the object Number
For example: -webkit-column-count:3;

3.column-gap: | 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

     
  
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
 
 生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。 那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。 但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。 
  

      
  
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
 
 在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。 非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系， 它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。 那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分， 在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。