Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve multi-column CSS3, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

CSS3 can design text content in a multi-column layout like a newspaper, as shown in the following example:

What we learn is not only technology, but also dreams! My headline introduces the basics of various programming languages such as HTML, CSS, Javascript, Python,Java,Ruby,C,PHP, MySQL, and so on.

Browser support

The numbers in the table represent the version number of the first browser that supports the method.

The-webkit- or-moz- immediately after the number is the prefix of the specified browser.

Attribute column-count4.0-webkit-10.02.0-moz-3.1-webkit-15.0-webkit-11.1column-gap4.0-webkit-10.02.0-moz-3.1-webkit-15.0-webkit-11.1column-rule4.0-webkit-10.02.0-webkit-15.0-webkit-11.1column-rule-color4.0-webkit-10.02.0-moz-3.1-webkit-15.0- Webkit11.1column-rule-style4.0-webkit-10.02.0-moz-3.1-webkit-15.0-webkit11.1column-rule-width4.0-webkit-10.02.0-moz-3.1-webkit-15.0-webkit11.1column-width4.0-webkit-10.02.0-moz-3.1-webkit-15.0-webkit11.1

CSS3 multi-column properties

We will learn the following multi-column properties of CSS3:

Column-count

Column-gap

Column-rule-style

Column-rule-width

Column-rule-color

Column-rule

Column-span

Column-width

CSS3 creates multiple columns

The column-count property specifies the number of columns that need to be split.

The following example divides the text in an element into three columns:

Example

Div {

-webkit-column-count: 3; / * Chrome, Safari, Opera * /

-moz-column-count: 3; / * Firefox * /

Column-count: 3

}

The gap between columns in CSS3 multiple columns

The column-gap property specifies the gap between columns.

The following example specifies that the gap between columns is 40 pixels:

Example

Div {

-webkit-column-gap: 40px; / * Chrome, Safari, Opera * /

-moz-column-gap: 40px; / * Firefox * /

Column-gap: 40px

}

CSS3 column border

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

Example

Div {

-webkit-column-rule-style: solid; / * Chrome, Safari, Opera * /

-moz-column-rule-style: solid; / * Firefox * /

Column-rule-style: solid

}

The column-rule-width property specifies the border thickness of two columns:

Example

Div {

-webkit-column-rule-width: 1px; / * Chrome, Safari, Opera * /

-moz-column-rule-width: 1px; / * Firefox * /

Column-rule-width: 1px

}

The column-rule-color property specifies the border color of two columns:

Example

Div {

-webkit-column-rule-color: lightblue; / * Chrome, Safari, Opera * /

-moz-column-rule-color: lightblue; / * Firefox * /

Column-rule-color: lightblue

}

The column-rule attribute is an acronym for all properties of column-rule-*.

The following example sets the thickness, style, and color of the direct border of the column:

Example

Div {

-webkit-column-rule: 1px solid lightblue; / * Chrome, Safari, Opera * /

-moz-column-rule: 1px solid lightblue; / * Firefox * /

Column-rule: 1px solid lightblue

}

Specify how many columns the element spans

The following example specifies that the element spans all columns:

Example

H3 {

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

Column-span: all

}

Specify the width of the column

The column-width property specifies the width of the column.

Example

Div {

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

Column-width: 100px

}

CSS3 multi-column properties

The following table lists the multi-column properties of all CSS3:

Attribute description column-count specifies the number of columns that the element should be split into. Column-fill specifies how to fill the column column-gap specifies the gap between columns column-rule the abbreviation of all column-rule-* properties column-rule-color specifies the color of the border between two columns column-rule-style specifies the style of the border between two columns column-rule-width specifies the thickness of the border between the two columns column-span specifies how many columns the element spans column-width specifies the width of the column columns sets the abbreviation of column-width and column-count Thank you for reading this article carefully. I hope the article "how to achieve multiple columns of CSS3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.