Latest web development tutorials

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.w3big.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

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

try it"

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

div {
-webkit-column-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
column-gap: 40px;
}

try it"

CSS3 column borders

column-rule-style property specifies the border style columns between columns:

Examples

div {
-webkit-column-rule-style: solid; / * Chrome, Safari, Opera * /
-moz-column-rule-style: solid; / * Firefox * /
column-rule-style: solid;
}

try it"

column-rule-width attribute specifies the border thickness of the two:

Examples

div {
-webkit-column-rule-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
column-rule-width: 1px;
}

try it"

column-rule-color attribute specifies the color of the border of the two:

Examples

div {
-webkit-column-rule-color: lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule-color: lightblue; / * Firefox * /
column-rule-color: lightblue;
}

try it"

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

div {
-webkit-column-rule: 1px solid lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid lightblue; / * Firefox * /
column-rule: 1px solid lightblue;
}

try it"

How many columns across the specified element

The following example specifies the <h2> element across all columns:

Examples

h2 {
-webkit-column-span: all; / * Chrome, Safari, Opera * /
column-span: all;
}

try it"

Specifies the width of the columns

column-width attribute specifies the width of the column.

Examples

div {
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}

try it"

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