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

This article mainly introduces "what is CSS3 Columns split layout". In daily operation, I believe that many people have doubts about what is CSS3 Columns split layout. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what is CSS3 Columns split layout"! Next, please follow the editor to study!

Fortunately, CSS3 provides a number of new column properties for creating column layouts. With these attributes, we no longer need to use attributes such as float,clear,margin for regulation, avoiding a lot of trouble.

CSS code

The column series properties in CSS3 provide a variety of different functions, and by combining them, you can get any column layout:

1.column-count: number of columns

2.column-gap: gap width between columns

3.column-width: recommended width; may not be used. Browsers calculate based on this value.

4.column-rule-width: width of split lines between columns

5.column-rule-style: split line style between columns

6.column-rule-color: demonstration of split lines between columns

7.column-span: allows the width of an element to span multiple columns

8.column-fill: disaggregation mode

To make a nice separate layout, you need at least column-count and column-gap:

The code is as follows:

/ * 3 columns with 10px spacing between each column * /

Ul.col-3 {

Column-count: 3

Column-gap: 10px

}

If you want to beautify the gap between the following, it's also simple:

The code is as follows:

/ * 3 columns, 10px spacing between each column, with golden isolation line * /

Ul.col-3 {

Column-count: 3

Column-gap: 10px

Column-rule: 1px solid # fc0

}

The specified element can also span multiple columns:

The code is as follows:

/ * take the following HTML as an example:

Watch head!

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Column 7

Column 8

Column 9

Column 10

Column 11

Column 12

, /

Div.col-3 {

Column-count: 3

Column-gap: 5px

}

Div.col-3 h3 {

Column-span: all

Text-align:center

Background: # eee

}

Very simple, and the display results are completely in line with our expectations!

Using CSS3's columns to make a page layout has many advantages: you don't need to calculate the width, you don't have to worry about whether the content will break the layout, and the math problem system will help you calculate. There is another, that is clear and neat semantics.

At this point, the study on "what is the CSS3 Columns split layout" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.