CSS3 column-span usage
CSS3 column-span
column-width attribute is used to specify the number of columns spanned.
Syntax structure:
column-span: none || all;
Parameter analysis:
(1).none: Default value, indicating not to span any column.
(2).all: means spanning all columns.
Browser support:
(1). IE10 and IE10 or above browsers support this attribute.
(2). Google Chrome supports this attribute.
(3). Firefox browser supports this attribute.
(4).opera browser supports this attribute.
(5).Safari browser supports this attribute.
Special Note:
Firefox browser needs to add -moz- prefix.
Google and Safari browsers need to add the -webkit- prefix.
Code example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
.columns {
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
h1 {
-webkit-column-span:all;
column-span:all;
}
</style>
</head>
<body>
<div class="columns">
<h1>螞蟻部落</h1>
互聯(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)用，微軟公司也隨之開發(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> 
