CSS3 multi-column
CSS3 text content can be designed like a newspaper multi-column layout, the following examples:
This tutorial - science is not only technology, but also a dream! This tutorial (www.w3write.com) provides the most complete programming technology based tutorial introduces the basics of HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, and other programming languages. But the site also provides a number of examples online, by way of example, you can better learn programming.
Browser Support
Figures in the table represent the first browser to support the method version number.
Immediately after the number -webkit- browser or -moz- specified prefix.
Attributes | |||||
---|---|---|---|---|---|
column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
column-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
column-rule | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
column-rule-color | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
column-rule-style | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
column-rule-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
column-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
CSS3 multi-column properties
This chapter we will learn a few more column properties of CSS3:
-
column-count
-
column-gap
-
column-rule-style
-
column-rule-width
-
column-rule-color
-
column-rule
-
column-span
-
column-width
CSS3 to create multiple columns
column-count
attribute specifies the number of columns need to be split.
The following example <div> element in the text is divided into three:
Examples
-webkit-column-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
column-count: 3;
}
CSS3 multi-column gap between columns and columns
column-gap
property specifies the gap between the columns and columns.
The following example specifies the gap between the column and the column is 40 pixels:
Examples
-webkit-column-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
column-gap: 40px;
}
CSS3 column borders
column-rule-style
property specifies the border style columns between columns:
Examples
-webkit-column-rule-style: solid; / * Chrome, Safari, Opera * /
-moz-column-rule-style: solid; / * Firefox * /
column-rule-style: solid;
}
column-rule-width
attribute specifies the border thickness of the two:
Examples
-webkit-column-rule-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
column-rule-width: 1px;
}
column-rule-color
attribute specifies the color of the border of the two:
Examples
-webkit-column-rule-color: lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule-color: lightblue; / * Firefox * /
column-rule-color: lightblue;
}
column-rule
property is shorthand for all the column-rule- * properties.
The following example sets the column directly for the border thickness, color and style:
Examples
-webkit-column-rule: 1px solid lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid lightblue; / * Firefox * /
column-rule: 1px solid lightblue;
}
How many columns across the specified element
The following example specifies the <h2> element across all columns:
Examples
-webkit-column-span: all; / * Chrome, Safari, Opera * /
column-span: all;
}
Specifies the width of the columns
column-width
attribute specifies the width of the column.
Examples
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}
CSS3 multi-column properties
The following table lists all the attributes of CSS3 multi-column:
Attributes | description |
---|---|
column-count | The number of columns specified element should be divided. |
column-fill | Specifies how to fill columns |
column-gap | Specifies the gap between the columns and columns |
column-rule | All column-rule- * shorthand property |
column-rule-color | Specifies the color of the border between the two |
column-rule-style | Specify the style of the border between the two |
column-rule-width | Specifies the thickness of the border between the two |
column-span | Specifies how many columns to cross element |
column-width | Specifies the width of the columns |
columns | Setting column-width and column-count shorthand |