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

This article mainly explains "how to realize css3 multi-column layout". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to implement css3 multi-column layout".

Column-count: specifies the number of columns that elements should be separated; the maximum number of columns.

Column-fill: specifies how to populate columns; the default value, auto, automatically adjusts the height of each column according to the content, and balance sets all column heights to the highest column height.

Column-gap: specifies the interval between columns; the default value is normal, which is equivalent to 1em. It should be noted that if the sum of column-gap and column-width is greater than the total width, the number of columns specified by column-count cannot be displayed, and the number and width of columns will be automatically adjusted by the browser.

Column-rule: sets the abbreviated properties of all column-rule-* properties; similar to border, except that it does not take up any space, so setting column-rule does not cause the column width to change. In addition, if the border width is greater than the column-gap column spacing, the border will not be displayed.

Column-span: specifies the number of columns the element should span; the default value, none, means not to span columns, and all means to span all columns. For example, the title of an article can be set to all to span columns.

Column-width: specifies the width of the column; defines a minimum width for the column. The default value of auto means that the column width will be adjusted automatically based on the number of column-count columns.

Of the above attributes, column-width and column-count are the most commonly used, abbreviated for these two attributes: columns;, for example:

# col {

-moz-columns:128em

-webkit-columns:128em

Columns:128em

}

What is stated in the above code is that the width of the column is: 8em, but the total number of columns will not exceed 12.

Let's take a look at the complete implementation code of a css3 multi-column layout:

Multi-column layout

.div {

Column-count:3

Column-gap:90px

Column-rule:1pxdashedgreen

Column-width:370px

}

.divh2 {

Text-align:center

-webkit-column-span:all

}

My hobby

The first paragraph

Everyone lives in the process of growth, and there will be more dreams and persistence in the process of growth. Slowly condensed into a growing deep sea. I = draw.

The second paragraph

Painting, this hobby is so ordinary! But infects the hearts of most girls! Looking at the pen gently waving in the hand, everything on the paper is alive! Let's go! get up! It's very lifelike. In an art class in school, the art teacher showed the paintings of other students, all of them lifelike and vivid! I'm so envious! The little heart was awakened by these beautiful paintings. Let me make up my mind, work hard to study art, student number art! Let my hand with a pen wave can also describe this state!

The third paragraph

Painting, this hobby is so ordinary! But infects the hearts of most girls! Looking at the pen gently waving in the hand, everything on the paper is alive! Let's go! get up! It's very lifelike. In an art class in school, the art teacher showed the paintings of other students, all of them lifelike and vivid! I'm so envious! The little heart was awakened by these beautiful paintings. Let me make up my mind, work hard to study art, student number art! Let my hand with a pen wave can also describe this state!

The fourth paragraph

Painting, this hobby is so ordinary! But infects the hearts of most girls! Looking at the pen gently waving in the hand, everything on the paper is alive! Let's go! get up! It's very lifelike. In an art class in school, the art teacher showed the paintings of other students, all of them lifelike and vivid! I'm so envious! The little heart was awakened by these beautiful paintings. Let me make up my mind, work hard to study art, student number art! Let my hand with a pen wave can also describe this state!

The fifth paragraph

Painting, this hobby is so ordinary! But infects the hearts of most girls! Looking at the pen gently waving in the hand, everything on the paper is alive! Let's go! get up! It's very lifelike. In an art class in school, the art teacher showed the paintings of other students, all of them lifelike and vivid! I'm so envious! The little heart was awakened by these beautiful paintings. Let me make up my mind, work hard to study art, student number art! Let my hand with a pen wave can also describe this state!

At this point, I believe that everyone on the "css3 multi-column layout how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.