CSS3 column-span
column-width屬性用來規定跨越的列數。
語法結構:
column-span: none || all;
參數解析:
(1).none:預設值,表示不跨越任何欄位。
(2).all:表示跨越所有的列。
瀏覽器支援:
(1).IE10和IE10以上瀏覽器支援此屬性。
(2).Google瀏覽器支援此屬性。
(3).火狐瀏覽器支援此屬性。
(4).opera瀏覽器支援此屬性。
(5).Safari瀏覽器支援此屬性。
特別說明:
火狐瀏覽器需要加上 -moz-前綴。
Google和Safari瀏覽器需要添加-webkit-前綴。
程式碼實例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</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> 互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件, 特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输, 后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软公司也随之开发了自己的"JavaScript"名叫JScript, 于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展, 于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA), 并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为JavaScript的实现基础。 </div> </body> </html>下一節