CSS Self-study note (CSS3): Multi-column Layout

In CSS3, there are several more simple properties about text layout added. With these new attributes, we can make simple typography of the text, like newspapers and magazines.

New partial properties, and browser support:

Properties	Browser Support
Column-count	Ie	Firefox (-moz-)	Chrome (-webkit-)	Safari (-webkit-)	Opera
Column-gap	Ie	Firefox (-moz-)	Chrome (-webkit-)	Safari (-webkit-)	Opera
Column-rule	Ie	Firefox (-moz-)	Chrome (-webkit-)	Safari (-webkit-)	Opera

Note:

• In the Firefox browser, add the (-moz-) prefix.
• In Chrome and Safari browsers, add the (-webkit-) prefix.
• For Internet Explorer, only IE10 and the above versions are supported.

New Attributes and descriptions:

Properties	Description
Column-count	Defines the number of columns that the element should be delimited
Column-fill	Define how columns are populated
Column-gap	Define the interval distance between columns
Column-rule	The shorthand property of the Column-rule property, which defines the rules between columns
Column-rule-color	Define a rule color between columns
Column-rule-style	Define a rule style between columns
Column-rule-width	Define the rule width between columns
Column-span	Defines the number of columns the element should span
Column-width	Define the width of a column
Columns	Shorthand properties for Column-width and Column-count

Through the definition of these new properties, I can make a simple layout of the text (Firefox browser)

*{-moz-column-count:3;-moz-column-gap:40px;-moz-column-rule:4px outset #ff0000; "}

The above CSS style is that the text in the element is divided into 3 columns, the distance between the columns is 40px, and the columns are separated by lines of color #ff0000 and width 4px.

In the same way, we can also format the contents of some elements.

For example, we can format the list:

Part of the code is (Firefox browser):

<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><style>ul{-moz-column-count:3;-moz-column-gap:40px;-moz-column-rule:4px outset #ff0000;}Li{background:#0CF;Border:#069 1px solid;Display:Inline-block;width:150px;margin:5px 0;}</style></Head><Body><ul><Listyle= "height:50px">1</Li><Listyle= "height:100px">2</Li><Listyle= "height:80px">3</Li><Listyle= "height:60px">4</Li><Listyle= "height:70px">5</Li><Listyle= "height:50px">6</Li><Listyle= "height:100px">7</Li><Listyle= "height:80px">8</Li><Listyle= "height:90px">9</Li><binstyle= "height:30px">10</Li></ul></Body></HTML>

CSS Self-study note (CSS3): Multi-column Layout