Multi-column layouts in CSS3 columns detailed

Columns syntax: columns:[column-width] | | [Column-count]
Sets or retrieves the number of columns and the width of each column of an object

Where: [Column-width]: Sets or retrieves the width of each column of an object; [Column-count]: Sets or retrieves the number of columns of an object.

CSS code:

Body{Font:14px/1.5 Georgia,serif,sans-serif;}P{margin:0;padding:5px 10px;background:#eee;}H1{margin:10px 0;font-size:16px;}. Test{width:628px;Border:10px Solid #000;-moz-columns:200px 3;-webkit-columns:200px 3;Columns:200px 3;}. Test2{Border:10px Solid #000;-moz-columns:200px;-webkit-columns:200px;Columns:200px;}

HTML code:

<H1>Fixed number of columns and column widths:</H1><Divclass= "Test">    <P>This module describes the multi-column layout in CSS. By using functionality described in this document, style sheets can declare, the content of an element are to be laid O UT in multiple columns.</P>    <P>On the WEB, tables has also been used to describe multi-column layouts. The main benefit of using css-based columns is flexibility; Content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily being presented on various output devices includ ing speech synthesizers and small mobile devices.</P></Div><H1>The column width is fixed and the number of columns is liquid according to container widths:</H1><Divclass= "Test2">    <P>This module describes the multi-column layout in CSS. By using functionality described in this document, style sheets can declare, the content of an element are to be laid O UT in multiple columns.</P>    <P>On the WEB, tables has also been used to describe multi-column layouts. The main benefit of using css-based columns is flexibility; Content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily being presented on various output devices includ ing speech synthesizers and small mobile devices.</P></Div>

Results:

Use the following columns to apply the relevant properties
1. Column-width: <length> | auto Sets or retrieves the width of each column of an object
Such as:-moz-column-width:200px;

2.column-count: <integer> | auto Set or retrieve the number of columns of an object
Such as:-webkit-column-count:3;

3.column-gap: <length> | normal Sets or retrieves the gap between the column and columns of an object
Such as:column-gap:normal;column-gap:40px;

4.column-rule: [ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ] Sets or retrieves the border between the columns of the object and the column. Composite properties. Equivalent to the Border property
Such as:column-rule:10px solid #090;

5.Column-span: none | all Sets or retrieves whether an object element spans all columns.
Such as:column-span:all;

6.column-fill: auto | balance Sets or retrieves the uniform height of all columns of an object.
Auto: Column Height adaptive content
Balance: The height of all columns is consistent with the highest of the columns
Such as:column-fill:balance;

7.column-break-before: Whether to break the auto | always | avoid | left | right | page | column | avoid-page | avoid-column object before setting or retrieving it.

Auto: Neither forcing nor prohibiting line breaking before the element and generating new columns
Always: line up before an element and create a new column
Avoid: Avoid line breaks before elements and create new columns

8.column-break-after: Whether to break the auto | always | avoid | left | right | page | column | avoid-page | avoid-column object after setting or retrieving it.

Auto: Neither forcing nor prohibiting line breaking after an element and creating a new column
Always: line up after an element and create a new column
Avoid: Avoid line breaks after elements and create new columns

9.column-break-inside: auto | avoid | avoid-page | avoid-column Sets or retrieves whether a break is inside an object.

Auto: Neither forcing nor prohibiting line breaking within an element and generating new columns
Avoid: Avoid line breaks within elements and create new columns

In fact, the usual is the front 5.

Multi-column layouts in CSS3 columns detailed