Multiple columns of css3 Learning Theory

Example: columns: 250px 3; 250px indicates the column width, and 3 indicates the number of multiple columns.

You can also specify only the column width, column-width: 300px;-moz-column-width: 300px;-WebKit-column-width: 300px; the maximum width of each topic on the webpage is 300 pixels. You can adjust the display of several columns according to the window width.

You can also specify only the number of columns, column-count: 3;-moz-column-count: 3;-WebKit-column-count: 3; automatically adjust the column width according to the window width.

 

Column-gap, column spacing, column-gap: 3em;-moz-column-gap: 3em;-WebKit-column-gap: 3em; defines the column spacing as 3em, the default value is 1em.

Column-rule: column border style, for example: column-rule: dashed 2px gray;-moz-column-rule: dashed 2px gray;-WebKit-column-rule: dashed 2px gray; defines a gray dotted line with a column border of 2 pixels. Column-rule: solid 5px blue;-moz-column-rule: solid 5px blue;-WebKit-column-rule: solid 5px blue; defines a blue solid line with a column border of 5 pixels.

Column-Span: defines cross-column display. The value can only be 1 or all. When the value is 1, it means that it is only displayed in this column. When the value is all, it will span all columns, and located above the Z axis of the column. Column-Span: All;-moz-column-Span: All;-WebKit-column-Span: All;

Column-fill: determines whether the column height is uniform. The value can only be auto or balance. When auto is set, the height of each column automatically varies with its content. When set to balance, the height is uniform.

Learning and learning .. O (distinct _ distinct) O ~