HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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.w3resource.net) 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 |