CSS3 column-span用法
CSS3 column-span
column-width属性用来规定跨越的列数。
语法结构:
column-span: none || all;
参数解析:
(1).none:默认值,表示不跨越任何列。
(2).all:表示跨越所有的列。
浏览器支持:
(1).IE10和IE10以上浏览器支持此属性。
(2).谷歌浏览器支持此属性。
(3).火狐浏览器支持此属性。
(4).opera浏览器支持此属性。
(5).Safari浏览器支持此属性。
特别说明:
火狐浏览器需要加 -moz-前缀。
谷歌和Safari浏览器需要添加-webkit-前缀。
代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <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>