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

Today, I will talk to you about how to use column multi-column attributes to adjust the layout of text columns on the page, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Column multi-column properties

Column-count: number of columns

Compatibility:

CSS Code copies content to the clipboard

-webkit-column-count:3

-moz-column-count:3

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

The column-gap attribute specifies the interval between columns

The column-rule property sets the width, style, and color rules between columns.

The new multi-column layout (multi-column) in CSS3 is a powerful extension of the block layout pattern in traditional HTML pages. This new syntax makes it easy for WEB developers to display text in multiple columns. We know that when a line of text is too long, it is difficult for the reader to read it, and it is possible to misread the line or read the series; people's point of view moves from one end of the text to the other end, and then to the beginning of the next line, and if the eyeball moves and floats too large, their attention will fade and it will be easy to read. Therefore, in order to maximize the efficiency of the use of large-screen display, the page design needs to limit the width of the text, so that the text is presented in multiple columns, just like the news typesetting in the newspaper.

But before the emergence of CSS3's multi-column layout (columns) syntax function, if people wanted the text to be displayed as multiple columns, they could either use absolute positioning, manually divide the text into paragraphs, or use JS scripts, and the emergence of new syntax has completely changed this situation.

The usage of columns

Number and width of columns

No matter how many columns you want a piece of text to display, all you need is two attributes: column-count and column-width.

The column-count property sets the specific number of columns, for example:

There has always been a headache in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and technologies to create various layouts, but we always feel that some new properties should be provided in CSS so that we can better manage layouts. 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.

This will make the text appear in two columns (first, your browser should support this new syntax, such as Firefox, Google browser, IE10+, etc.):

The column-width property controls the width of the column. If you do not provide a value for the column-count attribute, the browser is free to divide the text into the appropriate number of columns.

There has always been a headache in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and technologies to create various layouts, but we always feel that some new properties should be provided in CSS so that we can better manage layouts. 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.

And it turns out like this:

In a multi-column block of text, the text content is automatically filled in column by column.

Multi-column layout columns syntax shorthand

Most of the time, WEB programmers only need to use one of these two genera at the same time: column-count or column-width. Or both, fortunately, the attribute values of these two properties are in different units and will not be confused, so there is an abbreviation, columns, for example:

The column-width:12em we wrote earlier can be replaced with the following:

There has always been a headache in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and technologies to create various layouts, but we always feel that some new properties should be provided in CSS so that we can better manage layouts. 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.

The previously written column-count:4 can be replaced with the following syntax abbreviations:

There has always been a headache in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and technologies to create various layouts, but we always feel that some new properties should be provided in CSS so that we can better manage layouts. 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.

The case where both column-width:8em and column-count:12 are declared can be replaced with the following abbreviations:

There has always been a headache in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and technologies to create various layouts, but we always feel that some new properties should be provided in CSS so that we can better manage layouts. 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.

Balance of column height

What is described in the CSS3 specification is that the height of each column is balanced, and the browser will automatically adjust how much text is filled in each column and divide the text evenly to make the height of each column balanced.

Sometimes, however, we need to set the maximum height of the column, where the text will be filled from the first column, then the second column, the third column, and maybe later columns will be filled or overflowed. So, when the height or max-height property value is set on a multi-column layout, the column stretches to the specified height-no matter how much content it is, whether it is sufficient or exceeded.

Gap width between columns

There will be a gap between the two columns. By default, the interval width is 1em, but if you use the column-gap property, you will change the default width value:

There has always been a headache in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and technologies to create various layouts, but we always feel that some new properties should be provided in CSS so that we can better manage layouts. 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.

The browser of the column layout is perfectly compatible.

For browsers that do not support multi-column layout features, such as IE9/IE8, these attributes are ignored so that the layout presents a traditional single-block layout.

In order to ensure maximum browser compatibility, when using multi-column layout attributes, it is best to add browser engine prefixes, the most basic to add three: Google browser-webkit-, Firefox browser-moz-,IE browser-ms-, finally, don't forget to write without a prefix.

CSS3's multi-column layout (columns) is a very useful feature that makes it easy for WEB developers to make efficient use of widescreen displays.

After reading the above, do you have any further understanding of how to use the column multi-column properties to adjust the layout of the text columns on the page? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.