CSS3 Multiple Columns
With CSS3, you can create multiple columns for laying out text - like in newspapers!
In this chapter you will learn about the following multiple column properties:
column-count
column-gap
column-rule
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property
IE
Chrome
Firebox
Safari
Opera
column-count
10.0
4.0 -webkit-
2.0 -moz-
3.1 -webkit-
15.0 -webkit-
11.1
column-gap
10.0
4.0 -webkit-
2.0 -moz-
3.1 -webkit-
15.0 -webkit-
11.1
column-rule
10.0
4.0 -webkit-
2.0 -moz-
3.1 -webkit-
15.0 -webkit-
11.1
CSS3 Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into:
Example
Divide the text in a <div> element into three columns:
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
CSS3 Specify the Gap Between Columns
The column-gap property specifies the gap between the columns:
Example
Specify a 40 pixels gap between the columns:
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
CSS3 Column Rules
The column-rule property sets the width, style, and color of the rule between columns.
Example
Specify the width, style and color of the rule between columns:
div {
-webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 3px outset #ff00ff; /* Firefox */
column-rule: 3px outset #ff00ff;
}
CSS3 Multiple Columns Properties
The following table lists all the multiple columns properties:
Property
Description
CSS
column-count
Specifies the number of columns an element should be divided into
3
column-fill
Specifies how to fill columns
3
column-gap
Specifies the gap between the columns
3
column-rule
A shorthand property for setting all the column-rule-* properties
3
column-rule-color
Specifies the color of the rule between columns
3
column-rule-style
Specifies the style of the rule between columns
3
column-rule-width
Specifies the width of the rule between columns
3
column-span
Specifies how many columns an element should span across
3
column-width
Specifies the width of the columns
3
columns
A shorthand property for setting column-width and column-count
3
ليست هناك تعليقات:
إرسال تعليق