CSS3 ? ?? ???
CSS3 column-width
column-width ??? ?? ??? ???? ? ?????.
?? ??:
column-width: auto|length;
???? ??:
(1).auto: ???, ?? ?? ?? ?? ??? ?? ?????.
(2).length: ? ??? ?????(?: 100px).
???? ??:
(1) IE10 ? IE10 ?? ????? ? ??? ?????.
(2) Google Chrome? ? ??? ?????.
(3). Firefox ????? ? ??? ?????.
(4).opera ????? ? ??? ?????.
(5).Safari ????? ? ??? ?????.
?? ?? ??:
Firefox ?????? -moz- ???? ???? ???.
Google ? Safari ?????? -webkit- ???? ???? ???.
?? ?:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
.columns {
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-width:auto;
-moz-column-width: auto;
column-width: auto;
}
</style>
</head>
<body>
<div class="columns">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來(lái)越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來(lái)改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開(kāi)發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語(yǔ)言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語(yǔ)言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>
??? ? ?? ?? ???? auto? ?????(?? ??). ?? ?? ??? ???? ?? ???? ?? ?? ???? ?? ??? ? ????.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
.columns {
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-width:auto;
-moz-column-width: auto;
column-width: auto;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
</style>
</head>
<body>
<div class="columns">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來(lái)越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來(lái)改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開(kāi)發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語(yǔ)言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語(yǔ)言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>??? ? ?? ?? 3?? ?????. ?? 3? ??? ????? ?????. ?? ? ??? ?? ??? ?? ???? ?????.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
.columns {
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-width:50px;
-moz-column-width: 50px;
column-width: 50px;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
</style>
</head>
<body>
<div class="columns">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來(lái)越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來(lái)改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開(kāi)發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語(yǔ)言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語(yǔ)言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>? ????? ??? 50px, 3?? ????? ?? ??? ??? 50px? ????. ??, ? ??? 3?? ?? ?? Column-gap? ???? ? ?? ??? ??? ?? ?????. ?? Column-gap? ???? 1em(px? ???? ?? ??? ?? ??)???.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
.columns {
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-width:250px;
-moz-column-width: 250px;
column-width: 250px;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
</style>
</head>
<body>
<div class="columns">
互聯(lián)網(wǎng)的出現(xiàn)，極大的促進(jìn)了信息的交流，隨著步伐的前進(jìn)，網(wǎng)站的交互需求越來(lái)越多，但是受限于當(dāng)時(shí)的軟硬件條件，
特別是網(wǎng)絡(luò)環(huán)境的限制，非常簡(jiǎn)單的表單驗(yàn)證都要花費(fèi)大量的時(shí)間在服務(wù)器與客戶端之間進(jìn)行傳輸，
后來(lái)改名為JavaScript。隨著JavaScript在互聯(lián)網(wǎng)上的成功運(yùn)用，微軟公司也隨之開(kāi)發(fā)了自己的"JavaScript"名叫JScript，
于是在互聯(lián)網(wǎng)上就出現(xiàn)多種標(biāo)準(zhǔn)的"JavaScript"腳本語(yǔ)言，如果任其發(fā)展下去，那么將會(huì)嚴(yán)重影響互聯(lián)網(wǎng)發(fā)展，
于是標(biāo)準(zhǔn)化迫在眉睫。最后JavaScript被提交給提交給歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA），
并最終推出了ECMA-262標(biāo)準(zhǔn)，定義了名為ECMAScript的腳本語(yǔ)言，從此以后瀏覽器都將ECMAScript作為JavaScript的實(shí)現(xiàn)基礎(chǔ)。
</div>
</body>
</html>
?? ? ??? Column-gap? ? ??? ?? ?? ???? ???? ?? ? ?? ???? ? ??? ?????.
? ??? ???? ?? ?? ?? ??(? ?? ??, ?? ?? ?? ?? ????):
column-width = (width-(n-1)*font-size)/n
n ?? 2?? ??? ??? ???. ??? ??? ????.
(1) n? ? ??? n-1? ? ??? ??(column-gap)???.
(2) ?? ?? ??? ?? ????? (n-1)*font-size? ?? ??? ?????.
(3).(width-(n-1)*font-size)/n? ?? ?????.
?? ?? ??: Opera??? 1px? ?? ?? ????. ????? ??? ??? ???, ?? ?? 1px ?? 2px? ?? ?? ????.
