28th Chapter CSS3 Multi-column layout

28th Chapter CSS3 Multi-column layout
Learning Essentials:
1. Early multi-column issues
2. Properties and Versions
3. Attribute Interpretation

This chapter focuses on the multi-column layouts provided by CSS3 in HTML5, which allows us to create a fluid with a multi-column layout
Multi-column layouts.
A Early multi-column issues
We sometimes want to layout in a multi-column way like newspapers and magazines (at least two columns, usually more than three columns), but early
CSS provides a very limited layout. If it is a solid layout, then using a floating or positioning layout can
Complete. But for multiple columns of fluid, such as more than three columns, that can only be done with a floating layout, and it has a great limit.
Because it is block-based, the dynamic content of the non-scalable adaptive, basic inability.
Five paragraphs of content, divided into three columns
<div>
<p> I was the first paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the second paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the third paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the fourth paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the fifth paragraph of the content .... The omitted portion copies a large amount of text </p>
</div>
Five sections with headings, divided into three columns
<div>
<p> I was the first paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the second paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the third paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the fourth paragraph of the content .... The omitted portion copies a large amount of text </p>
<p> I am the fifth paragraph of the content .... The omitted portion copies a large amount of text </p>
</div>
Door two groups of content, if you want to use floating and positioning to achieve three columns of fluid, basically impossible. and the actual application, the demand may be changeable, to change into four columns or five columns? Therefore, CSS3 provides a multi-column Layout property columns to implement
The function of this dynamic transformation.

Two Properties and versions
CSS3 provides a collection of 7 properties, such as columns multi-column layout properties, as follows:

Property Description
Columns integration of Column-width and Column-count two properties
Column-width define column widths per column
Column-count defining the number of columns in a column
Column-gap Defining column Spacing
Column-rule Defining column Borders
Column-span define a multi-column layout child element cross-column effect, Firefox does not support
Column-fill controls the sizing effect for each column, which is not supported by mainstream browsers

Because the column attribute set is not yet included in the standard, most browsers must use the vendor prefix to access it, in the main
Streaming browser can be very well supported. Specific prefix content Lookup site

From the table above, we can see that in order for the latest browser to achieve the full effect, you must use the former
Embellished
Full form
-webkit-columns:150px 4;
-moz-columns:150px 4;
Columns:border-box;

Three Attribute interpretation
For the convenience of demo, we tested in Firefox Firefox and only demonstrated with the-moz-prefix.
1.columns
Columns is a composite property that contains both shorthand for columns-width and Columns-count. Meaning
Sets the number of columns and the column width at the same time.
Divided into four columns, each row width adaptive
-moz-columns:auto 4;
2.column-width
The Column-width property is used to set the width of each column.
Set column widths

-moz-column-width:200px;
Here set the 200px, a little bit the meaning of the minimum width. When the browser zooms to a size less than 200, it becomes 1
Column display. And if it is auto, it keeps four columns.

Property value
Auto
Description
Default value, adaptive.
Sets the column width.
Length value
3.column-count
The Column-count property that is used to set how many columns.
Set Number of columns
-moz-column-count:4;
Property value
Description
Auto
The default value, which represents just 1 columns.
Numerical
Sets the number of columns.
4.column-gap
Column-gap property, for setting column spacing
Set column spacing
-moz-column-gap:100px;
Property value
Auto
Numerical
Description
The default value, which represents just 1 columns.
Sets the number of columns.
5.column-rule
Column-rule property, sets the split line in the middle of each column
Set column edges
-moz-column-rule:2px dashed gray;
Property Description
Column-rule < width > < STYLE > < color > Border shorthand.
Column-rule-width sets the border width individually.
Column-rule-style sets the style of the border individually.
Column-rule-color sets the color of the border individually.

The column edges do not affect the layout, and it adjusts to show whether the layout is scaled itself. If we zoom the page
It automatically disappears when only one column is displayed.

6.column-span
Column-span property, set the cross-column headline.
Cross-column header, fixed using WebKit because Firefox is not supported
-webkit-column-span:all;
Property Value Description
The None default value, which means that the column is not spanned.
All represents a cross-column.

Example

<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>CSS3 multi-column layouts </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<div>
<p> in the first quarter, smartphone shipments fell 4.3% from a year earlier, the first in six years, according to the latest data released by IDC, a market research firm. Other findings suggest that smartphone shipments are still growing in the first quarter of the Chinese market, but their growth has slowed significantly compared with previous ones. </p>
<p> in the first quarter of this year, Samsung's market share in China had fallen to four, the first in a year ago, according to IDC data. However, Samsung is hopeful about the Chinese market and hopes to continue to win growth through its high-end mobile phone galaxy S6. "While there are signs that the explosive growth of China's smart market will slow this year, most of the 885 million Chinese mobile phone users are using low-end smartphones, so even if the Chinese market is saturated, the upgrade still leaves considerable room for high-end handsets," Samsung said in a statement. "</p>
<p> insiders say the significant slowdown in the growth of smartphones in the Chinese market is mainly affected by the reduction in first-time buyers. Counterpoint, director of research at the Market Research Institute, said that in China, the penetration rate of smartphones has exceeded 90%, which means that users in China who want to use smartphones have already made their first purchase and are now in a period of upgrading their phones. </p>
<p> Liao, who works for a technology company in Beijing, belongs to this group. Mr. Liao is currently using Apple's iphone 6, and he has changed his phone almost every two years. But from the current situation, Mr. Liao is still more fond of the current use of the iphone 6. "There will be no more phone purchases in the near future unless the phone is lost or broken," he said. I may still buy an Apple phone, and if Samsung can launch a nice phone, I will consider it. "</p>
<p> the slowdown in the pace of China's market growth will have a substantial impact on foreign smartphone makers such as Apple and Samsung, as well as local companies such as Xiaomi. At the same time, both foreign and local companies, such as Lenovo, Cool and Huawei, are investing more in the Chinese market, many of them focusing on big-screen smartphones with rising prices. </p>
</div>

</body>

@charset "Utf-8";

div {
/*-moz-columns:auto 3;*/
/*-moz-columns:150px 3;*/

/* If the number of columns is not set, but the width of each column is set, the number of columns is set automatically */
-moz-column-width:150px;
-moz-column-count:3;
-moz-column-gap:50px;
-moz-column-rule:2px dashed gray;

-webkit-column-width:150px;
-webkit-column-count:3;
-webkit-column-gap:50px;
-webkit-column-rule:2px dashed gray;

column-width:150px;
Column-count:3;
column-gap:50px;
column-rule:2px dashed gray;
}

H1 {
Text-align:center;

-moz-column-span:all;
-webkit-column-span:all;
Column-span:all;

}

28th Chapter CSS3 Multi-column layout