CSS3 ?? ? ??
CSS3? ??? ?? ? ????? ?? HTML ? ???? ?? ???? ??? ???? ??? ????. ? ??? ??? ???? ? ???? ?? ?? ???? ?? ??? ? ????. ??? ??? ?? ?? ?? ??? ??? ? ????? ??? ?? ??? ????? ?? ? ??? ?? ?? ????. ?? ?? ?? ?? ??? ???? ?? ?? ???? ???? ?? ?? ? ?? ???. ??? ?? ?? ?????? ??? ????? ????? ??? ?? ?????? ???? ??? ???? ???? ?? ?? ??? ? ??? ??? ???? ?????. ?? ~???????????????????????????????????????????????????.
column-fill ? ??? ?? ?? column-gap ? ??? ?? ??
column-rule-color ? ? ??? ??? ??
column-rule-style? ??? ? ? ??? ??? ???? ?????.
column-rule-width? ? ? ??? ??? ??? ?????.
column-span? ??? ????? ?? ? ?? ?????.
? ??? ? ??? ?????.
columns ? ?? ? ? ?? ??? ??
? ????? ?? ????? ???? ?????.?? ? ???? ??? ???? ?? ?? ????? ?? IE9/IE8??? ??? ?? ??? ????? ????? ???? ?? ?? ????? ?????. ???? ???? ???? ????? ?? ? ???? ??? ??? ? ???? ?? ???? ???? ?? ?? ????. ?? ???? ???? Google Chrome? ?? -webkit-, Firefox? ?? -? ????. -ms- IE ??????? ????? ??? ?? ???? ?? ?? ???.<!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><!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日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，
預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>
column-gap:
<length> | Normal ??? ? ??? ??? ????? ?????. ?: 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日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>
? ??:
[column-rule-width ] || [column-rule-style ] || [column-rule-color ] ??? ? ??? ???? ????? ?????. ?? ??. ??? ??? ?????.
?: 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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，
預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule-style ??? ? ??? ??? ?????. columns ??? ???:
<!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日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(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>
