36.CSS3 Multi-Column layout

28th Chapter CSS3 Multi-column Layout

First, the early multi-column problem

Five paragraphs of content, divided into three columns

<div>

<p> ... </p>

<p> ... </p>

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

the five sections with headings are divided into three columns.

<div>

First paragraph content

<p> ... </p>

Second paragraph content

<p> ... </p>

Third paragraph content

<p> ... </p>

Fourth paragraph content

<p> ... </p>

Fifth paragraph content

<p> ... </p>

</div>

so CSS3 provides a multi-column layout attribute columns to implement this dynamic transformation function

Ii. Attributes and versions

CSS3 provides a Collection of 7 properties, such as columns multi-Column layout properties , as follows

Properties Description

Columns integration of columns-width and columns-count two properties

Columns-width Define the width of each column

Columns-count defining the column width

Columns-gap defining column spacing

Columns-rule defining column borders

Columns-span define a multi-column layout child element cross-column effect,Firefox does not support

Columns-fill controls the sizing effect for each column, which is not supported by mainstream browsers

because the column attribute is not yet included in the standard, most browsers must be prefixed with a vendor to use it, but most mainstream browsers support it, and the following are the main browser support scenarios and prefixes

Opera Firefox Chrome Safari IE

support requires prefix 11.5~2~4~3.1~ C8>8 None

Support without prefixes No no no no no 10.0+

using the table above, you'll need to use a prefix to get all the latest browser implementations

full Form

-webkit-columns:150px 4;

-moz-columns:150px 4;

Columns:150px 4;

Third, attribute interpretation

for convenience of explanation, use Firefox Browser test, only with -moz- prefix display

1,columns is a composite attribute, including columns-width and columns-count two shorthand, Set to columns and column widths at the same time

divided into four columns, each row width adaptive

-moz-columns:auto 4;

2. Thecolumn-width property is used to set the width of each column

Set column widths

div{

-moz-columns:100px 3; when pulling the browser border to narrow is, not enough to support 3 columns, will automatically become 2 columns, and finally become 1 columns,1 The minimum column width is 100px .

}

-moz-columns-width:100px ( If the number of columns is not set but pixels are set, the system automatically sets the number of columns )

Property Value Description

(1) Auto default value, adaptive

(2) length value set column width

3.column-count to set how many columns

set Number of columns

-moz-columns-count:4;

(1) Auto default value, which indicates a column

(2) number of numeric settings columns

4.column-gap for setting column spacing

-moz-columns-gap:100px;

(1) (2) Ibid .

5.column-rule set the split line in the middle of each column

-moz-columns-rule:2px dashed gray;

(1) Columns-rule < width >< style >< color > Border Shorthand form

(2) Columns-rule-width individually set border width

(3) Columns-rule-style style for setting borders individually

(4) Columns-rule-color individually set the color of the border

Judging the line does not affect the layout, he will adjust the display according to the layout of the zoom, if we zoom the page to only display a column, he automatically disappears.

6,column-span Set the cross-column big title

-webkit-column-span:all; ( because Firefox is not yet supported, use WebKit first )

(1) None default value, which indicates a different cross-column

(2) All indicates a cross-column -

36.CSS3 multi-column layout