CSS3 Column-width Property

Trang chủ » Html Css Column Width » CSS3 Column-width Property

Có thể bạn quan tâm

CSS3 column-width Property « Previous Complete CSS Reference Next »

Example

Specify a suggested, optimal width for the columns:

div { -webkit-column-width: 100px; /* Chrome, Safari, Opera */ -moz-column-width: 100px; /* Firefox */ column-width: 100px; } Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The column-width property specifies a suggested, optimal width for the columns.

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.columnWidth="100px" Try it

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
column-width 50.04.0 -webkit- 10.0 2.0 -moz- 9.03.1 -webkit- 37.015.0 -webkit-11.1

CSS Syntax

column-width: auto|length|initial|inherit;

Property Values

Value Description Play it
auto Default value. The column width will be determined by the browser Play it »
length A length that specifies the width of the columns Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit
Examples

More Examples

Column-count

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; } Try it Yourself »

Column-gap

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.

div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; } Try it Yourself »

Column-rule

Specify the width, style and color of the rule between columns.

div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */ -moz-column-rule: 4px outset #ff00ff; /* Firefox */ column-rule: 4px outset #ff00ff; } Try it Yourself »

Related Pages

CSS3 tutorial: CSS3 Multiple Columns

HTML DOM reference: columnWidth property

« Previous Complete CSS Reference Next »

Từ khóa » Html Css Column Width