The best CSS3 multi-column Tutorial In 2024, In this tutorial you can learn Browser Support,CSS3 multi-column properties,CSS3 to create multiple columns,CSS3 multi-column gap between columns and columns,CSS3 column borders,How many columns across the specified element,Specifies the width of the columns,CSS3 multi-column properties,
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.
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 |
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
column-count
attribute specifies the number of columns need to be split.
The following example <div> element in the text is divided into three:
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:
column-rule-style
property specifies the border style columns between columns:
column-rule-width
attribute specifies the border thickness of the two:
column-rule-color
attribute specifies the color of the border of the two:
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:
The following example specifies the <h2> element across all columns:
column-width
attribute specifies the width of the column.
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 |