CSS3 multi-column properties
The new multi-column layout (multi-column) in CSS3 is a powerful expansion of the block layout mode in traditional HTML web pages. This new syntax allows WEB developers to easily display text in multiple columns. We know that when a line of text is too long, it will be more difficult for readers to read, and they may read the wrong line or read serially; people's eyes move from one end of the text to the other, and then to the beginning of the next line. If the eyeball If the movement is too large, their attention will be reduced and they will easily be unable to read. Therefore, in order to use large-screen displays with maximum efficiency, the page design needs to limit the width of the text and allow the text to be presented in multiple columns, just like the news layout in a newspaper.
Attributes ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????.
column-fill Specifies how to fill the column
column-gap Specifies the gap between columns column-rule All column-rule- * Abbreviation of attribute
Column layout browsers are perfectly compatible
For some browsers that do not support multi-column layout features, such as IE9/IE8, the These attributes are all ignored so that the layout behaves like a traditional monolithic layout.
In order to ensure maximum browser compatibility, when we use multi-column layout attributes, it is best to add the browser engine prefix. The most basic ones are three: Google Chrome's -webkit-, Firefox -moz- in the browser, -ms- in the IE browser, and finally, don’t forget to write it without the prefix. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:0;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}
</style>
</head>
<body>
<h1>列數(shù)及列寬固定:</h1>
<div>
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列寬固定，根據(jù)容器寬度液態(tài)分布列數(shù):</h1>
<div>
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
</body>
</html>
column-count：
Such as: -webkit-column-count:3;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.columns{width:300px;}
.columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
.columns .column_count{
-webkit-column-count:3;
-moz-column-count:3;
}
</style>
</head>
<body>
<div>columns-count</div>
<div>
據(jù)俄羅斯《消息報(bào)》19日報(bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預(yù)計(jì)屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>
##column -gap：
##<length> | normal Sets or retrieves the gap between columns of the object
Such as: column-gap:normal;column-gap:40px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.columns{width:300px;}
.columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
.columns .column_gap{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-gap:40px;
-moz-column-gap:40px;
}
</style>
</head>
<body>
<div>columns-gap</div>
<div>
據(jù)俄羅斯《消息報(bào)》19日報(bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計(jì)屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>
column-rule：
[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ] Sets or retrieves the border between columns of an object. Composite properties. Equivalent to the border attribute column-rule-width attribute specifies the border thickness of the two columns: ## The #column-rule-style attribute specifies the border style between columns:
For example: column-rule:10px solid #090;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:outset;
column-rule-width:10px;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:outset;
-moz-column-rule-width:10px;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:outset;
-webkit-column-rule-width:3px;
}
</style>
</head>
<body>
<div class="newspaper">
據(jù)俄羅斯《消息報(bào)》19日報(bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預(yù)計(jì)屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:dashed;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dashed;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:dashed;
}
</style>
</head>
<body>
<div class="newspaper">
據(jù)俄羅斯《消息報(bào)》19日報(bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計(jì)屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:outset;
column-rule-color:blue;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:outset;
-moz-column-rule-color:blue;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:outset;
-webkit-column-rule-color:blue;
}
</style>
</head>
<body>
<div class="newspaper">
據(jù)俄羅斯《消息報(bào)》19日報(bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計(jì)屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>Specifies how many columns the element spans <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:4;
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
}
h3
{
column-span:all;
-webkit-column-span:all; /* Safari and Chrome */
}
</style>
</head>
<body>
<h3>最新軍事消息</h3>
<div class="newspaper">
據(jù)俄羅斯《消息報(bào)》19日報(bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計(jì)屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>Specify the width of the columnThe column-width attribute specifies the width of the column. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:0;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
width:628px;
border:10px solid #000;
-moz-column-width:200px;
-moz-column-count:3;
-webkit-column-width:200px;
-webkit-column-count:3;
column-width:200px;
column-count:3;
}
.test2{
border:10px solid #000;
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
}
.test3{
border:10px solid #000;
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
}
</style>
</head>
<body>
<h1>列數(shù)及列寬固定:</h1>
<div class="test">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列寬固定，根據(jù)容器寬度液態(tài)分布列數(shù):</h1>
<div class="test2">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列數(shù)固定，根據(jù)容器寬度液態(tài)分布列寬:</h1>
<div class="test3">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
</body>
</html>
