CSS3 多列屬性
CSS3中新出現(xiàn)的多列佈局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀佈局模式的強大擴充。這種新語法能夠讓WEB開發(fā)人員輕鬆的讓文字呈現(xiàn)多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限製文字的寬度，讓文字以多列呈現(xiàn)，就像報紙上的新聞排版一樣。
屬性 ? ? ? ? ? ? ? ? ? ? ? ? ? ?#描述上
#?#column-count ##說明
#?#?列數(shù)指定列數(shù)指定的列數(shù)。
column-fill ? ?指定如何填入列? ?
column-gap ? ?指定列與列之間的間隙? ?
column-rule ?指定列與列之間的間隙? ?
column-rule ? ?所有column-rule-
column-rule ?* 物件的簡寫? ?
column-rule-color ? ?指定兩列間邊框的顏色? ?
column-rule-style ? ?指定兩列間邊框的樣式??
column-rule-##column-rule-## width ? ?指定兩列間邊框的厚度? ?column-span ? ?指定元素要跨越多少列? ?
#column-width ?count 的簡寫? ?
列佈局的瀏覽器完美相容對於一些不支援多列佈局特徵的瀏覽器，例如IE9/IE8，會把這些屬性全部忽略，這樣佈局就呈現(xiàn)傳統(tǒng)的單塊佈局。 為了確保瀏覽器最大的相容性，我們在使用多列佈局屬性時，最好添加瀏覽器引擎前綴，最基本的要加上三種：Google瀏覽器的-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ù)字
如：-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ù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column -gap：
如：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ù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>
[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]設定或擷取物件的列與列之間的邊框。複合屬性。相當於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ù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(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ù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(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ù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(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ù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(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>
