CSS3 ?? ?

CSS3? ??? ???? ???? ?? ? ?????? ???? ? ????.

??? column
1.column-width?? ???? ?? ?????. <length> ??? ? ?
?: -moz-column-width:200px;

2.column-count:<integer> -count:3;

3.column -gap: <length> Normal ??? ? ?? ??? ????? ?????. ?: column-gap:normal;column-gap:40px;

4.column -rule:[column-rule-width ] || [column-rule-style ] || [column-rule-color ] ??? ? ??? ???? ????? ?????. ?? ??. ??? ??? ?????

?: column-rule:10px solid #090;

5.column-span: none | all ?? ??? ?? ?? ?? ??? ??? ????? ?????.

?: column-span:all;

6.column-fill: auto | Balance ??? ?? ? ??? ???? ??? ????? ?????.

auto: ? ?? ??? ???

balance: ?? ?? ??? ?? ?? ??? ?????.
?: column-fill:balance;

7.column-break-before: auto ?? ??? | | ??? | ? | ?? ??? | ?? ? ??? ????? ???? ?? ?? ??? ??.

auto: ?? ?? ??? ??? ? ? ??? ????? ???? ??

always: ?? ?? ?? ??? ??? ? ? ??

avoid: ?? ?? ??? ???? ? ? ? ??

8.column-break -after: ?? | ?? | ?? | ??? ? | ??? ????? ??? ? ? ?? ??.

auto: ?? ?? ?? ?? ? ?? ???? ?? ????? ???? ????.

??: ?? ?? ?? ?? ?? ? ?? ?????.

??: ?? ?? ?? ? ?? ?????.

9.column-break -inside: auto | ?? | ?? ??? | ?? ? ?? ???? ?? ????? ??? ????? ?????.

auto: ?? ???? ? ?? ? ? ? ??? ????? ???? ????.

CSS3? ?? ?? ?????. ??? ?????.

?? ???? <div> ??? ???? 3?? ?? ????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p>
<div class="newspaper">
生長在非洲荒漠地帶的依米花，默默無聞，少有人注意過它。許多旅人以為它只是一株草而已。但是，它會在一生中的某個清晨突然綻放出美麗的花朵。
那是無比絢麗的一朵花，似乎要占盡人世間所有色彩一樣。它的花瓣兒呈蓮葉狀兒，每瓣自成一色：紅、白、黃、藍，與非洲大地上空的毒日爭艷。
但是，它的花期很短，最多只有兩天。兩天后它就會隨著母株一起枯萎，開花意味著它的生命的終結(jié)。
</div>
</body>
</html>

CSS3 ?? ?? ? ?? ??

column-gap ??? ? ??? ??? ?????.

?? ???? ? ??? ??? 40??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p>
<div class="newspaper">
在非洲的荒漠地帶，植物的生長需要水分，而開花的植物對水分的需求更大。
非洲一般植物都有龐大的根系采水，以供自身的水分需求。但是依米花沒有根系，
它只有惟一的一條主根，孤獨地蜿蜒盤曲著鉆入地底深處，尋找有水的地方。
那需要幸運和頑強努力，一株依米花往往需要四至五年的時間在干燥的沙漠里尋找水源，然后一點點積聚養(yǎng)分，
在完成蓓蕾所需要的全部養(yǎng)分后，它開花了！所以在它最美麗的時候，它因耗盡了自己的所有的養(yǎng)分而凋零。
</div>
</body>
</html>

CSS3 ? ???

column-rule-style ??? ? ??? ??? ???? ?????.

??? ?? ?? ?? ??? ?????.

?? ???? <h2> ??? ?? ?? ?? ??? ?????.

? ??? ?????.

column-width ??? ? ??? ?????.

CSS3 ?? ? ??

?? ??? ?? CSS3 ?? ? ??? ???? ????.

column-count ? ? ? ? ? ? ? ? ? ? ???? ???? ?? ? ?? ?????. -Column-Fill? ?? ??? ??? ?????.

Column-Gap? ?? ? ??? ??? ?????.
-Column-Rule ?? Column-rule-* ??? ?? ??
Column-rule-color? ? ?? ??? ?????. 框Column-SPAN? ? ?? ?? ???? ??? ?????.

?? ?? ??? ? ??
? ?? ??? ? ??? ??? ?????.

???? ??

||

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 生長在非洲荒漠地帶的依米花，默默無聞，少有人注意過它。許多旅人以為它只是一株草而已。但是，它會在一生中的某個清晨突然綻放出美麗的花朵。那是無比絢麗的一朵花，似乎要占盡人世間所有色彩一樣。它的花瓣兒呈蓮葉狀兒，每瓣自成一色：紅、白、黃、藍，與非洲大地上空的毒日爭艷。但是，它的花期很短，最多只有兩天。兩天后它就會隨著母株一起枯萎，開花意味著它的生命的終結(jié)。 </div> </body> </html>

?????? ???
????