1. Home
  2. CSS3 column-count property

The best CSS3 column-count property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,Try it Yourself - Examples,related articles,

CSS3 column-count property

Examples

The text is divided div element into three columns:

div
{
column-count: 3;
-moz-column-count: 3; / * Firefox * /
-webkit-column-count: 3; / * Safari and Chrome * /
}


In the bottom of this page for more examples.

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

属性
column-count 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1

Attribute definitions and instructions

column-count property specifies the number of columns of an element should be divided.

Defaults: auto
inherit: no
version: CSS3
JavaScript syntax: object .style.columnCount = 3

grammar

column-count:number|auto;

value Explanation
number The optimal number of columns in which the contents of the element can not flow out
auto The number of columns will depend on other attributes, such as: "column-width"

Examples

Try it Yourself - Examples

Column-gap
Text in the div element into three columns, and specify the gap between the columns of a 30 pixel.

Column-rule
Rules specify between columns: width, style and color.

related articles

CSS3 tutorial: CSS3 Multiple the Columns

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 column-count property
10/30