CSS3 多列屬性
CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴(kuò)充。這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示。我們知道，當(dāng)一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然后換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大屏幕顯示器，頁面設(shè)計中需要限制文本的寬度，讓文本按多列呈現(xiàn)，就像報紙上的新聞排版一樣。
屬性 描述
column-count 指定元素應(yīng)該被分割的列數(shù)。
column-fill 指定如何填充列
column-gap 指定列與列之間的間隙
column-rule 所有 column-rule-* 屬性的簡寫
column-rule-color 指定兩列間邊框的顏色
column-rule-style 指定兩列間邊框的樣式
column-rule-width 指定兩列間邊框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的寬度
columns 設(shè)置 column-width 和 column-count 的簡寫
列布局的瀏覽器完美兼容
對于一些不支持多列布局特征的瀏覽器，比如IE9/IE8，會把這些屬性全部忽略，這樣布局就呈現(xiàn)出傳統(tǒng)的單塊布局。
為了保證瀏覽器最大的兼容性，我們在使用多列布局屬性時，最好添加瀏覽器引擎前綴，最基本的要加上三種：谷歌瀏覽器的-webkit-，火狐瀏覽器的-moz-，IE瀏覽器的-ms-，最后，別忘了不帶前綴的寫法。
<!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：
<integer> | auto 設(shè)置或檢索對象的列數(shù)
如：-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ù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預(yù)計屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-gap：
<length> | normal 設(shè)置或檢索對象的列與列之間的間隙
如：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ù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule：
[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]設(shè)置或檢索對象的列與列之間的邊框。復(fù)合屬性。相當(dāng)于border屬性
如：column-rule:10px solid #090;
column-rule-width 屬性指定了兩列的邊框厚度:
<!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ù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預(yù)計屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule-style 屬性指定了列與列間的邊框樣式：
<!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ù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule-color 屬性指定了兩列的邊框顏色：
<!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ù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>指定元素跨越多少列
<!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ù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國，預(yù)計屆時在俄羅斯完成培訓(xùn)的中國飛行員將直接駕機(jī)回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>指定列的寬度
column-width 屬性指定了列的寬度。
<!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>
![Beginnen Sie schnell mit dem Golang Gin-Framework [Verwenden Sie Gin, um ein gleichzeitiges IM-Instant-Messaging-System auf Millionenebene aufzubauen]](https://img.php.cn/upload/course/000/000/068/63a2b21046723283.jpg)
