CSS3 Multi-Column layout

Http://www.webhek.com/css3-multi-columns

Http://express.ruanko.com/ruanko-express_46/technologyexchange5.html

The new multi-column layout (multi-column) in CSS3 is a powerful extension of the block layout pattern in traditional HTML Web pages. This new syntax allows Web developers to easily make text appear in multiple columns. We know that when a line of text is too long, the reader is more difficult to read, it is possible to read the wrong line or read the serial; People's viewpoints move from one end of the text to the other and then to the beginning of the next line, and if the eyeballs move too much, their attention will be reduced and 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 in multiple columns, like the newspaper in the news layout.

But before CSS3 's multi-column layout (columns) syntax functions, people want to make the text appear in multiple columns, either by using absolute positioning, by manually giving the text a paragraph, or by using a JS script, and the advent of the new syntax completely changes the situation.

Dole (columns) Usage column number and column width

Regardless of how many columns of text you want to display, you need only two properties: column-count and column-width .

column-countproperty to set the specific number of columns, for example:

<divstyle= "column-count: 2;" There's always been a headache in >css, and it's a hassle to create layouts. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble. </div>        

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

CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble.

column-widthproperty controls the width of the column. If you do not provide a column-count property value, then the browser is self-determined to divide the text into the appropriate number of columns.

<divstyle= "column-width: 10em;" There's always been a headache in >css, and it's a hassle to create layouts. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble. </div>        

It becomes this:

CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble.

This is described in detail in the CSS3 specification.

In a multi-column text block, the text content is automatically populated with a column of columns.

Multi-column Layouts columnsSyntax 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 two at the same time, fortunately, the property values of the two properties are different units, not confusing, so there is a shorthand method, columns for example:

What we wrote earlier column-width:12em can be replaced by the following:

< Div  Style= "columns< Span class= "token punctuation" >:12em "> CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble. </div >             

CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble.

Previously written column-count:4 can be replaced with the following syntax shorthand:

< Div  Style= "columns< Span class= "token punctuation" >:4 "> CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble. </div >             

CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, with these attributes, we don't need to use float, clear, margin and other properties to regulate, avoid a lot of trouble.

At the same time column-width:8em , column-count:12 the declaration of the situation can be replaced with the following shorthand:

< Div  Style= "columns< Span class= "token punctuation" >:12 8em "> CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble. </div >             

CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, with these attributes, we don't need to use float, clear, margin and other properties to regulate, avoid a lot of trouble.

Balance of Column Heights

As described in the CSS3 specification, the height of each column is balanced, and the browser automatically adjusts how much text is filled in each column, evenly dividing the text, so that the height of each column is balanced and consistent.

However, sometimes, we need to set the maximum height of the column, this time, the text content will start from the first column, then the second column, the third column, perhaps the future column will be filled with dissatisfaction, may overflow. So, when you set or attribute values on a multi-column layout height max-height , the column extends to the specified height-no matter how much, enough, or super.

Gap interval Width between columns

There will be gap intervals between the two columns. By default this interval width is 1em , but if you use column-gap attributes, the default width value will be modified:

<div style=" column-width :20em; column-gap:2em;< Span class= "token punctuation" > ">css, which is the hassle of creating layouts. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble. </div >             

CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble.

The browser of the column layout is perfectly compatible

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

In order to ensure maximum browser compatibility, we use multi-column layout properties, it is best to add the browser engine prefix, the most basic to add three kinds: Google browser, -webkit- firefox -moz- , IE browser -ms- , and finally, do not forget the wording without a prefix.

Summarize

CSS3 's multi-column layout (columns) is a useful feature feature that makes it easy for web developers to make efficient use of widescreen displays. You will find that you need them in many places, especially where you need to automatically balance column heights.

CSS3 Multi-Column layout