HTML5column属性布局页脚,CSS3代码column属性实现瀑布流效果

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示，也就是人们常说的瀑布流式布局。在CSS3的多列布局(columns)语法功能出现之前，人们如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，或者使用JS脚本插件等，而新语法的出现，彻底改变了这样的局面。

不管想让一段文本呈多少列显示，你需要的只是两个CSS3属性：column-count 和 column-width。column-count 属性设置列的具体个数，这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法，比如火狐浏览器、谷歌浏览器，IE10+等)。column-width属性控制列的宽度。如果你没有定义column-count属性值，那么，浏览器就是自主决定将文本分成合适的列数。以下为实例代码：HTML>

CSS3代码column属性实现瀑布流效果

.container{

-webkit-column-width:260px; /* Safari 和 Chrome */

-moz-column-width:260px; /* Firefox */

-webkit-column-gap:5px;/* Safari 和 Chrome */

-moz-column-gap:5px;/* Firefox */

}

/*数据块 砖块*/

.container div{width:260px;margin:4px 0;}

对于一些不支持多列布局特征的浏览器，比如IE9/IE8，会把这些属性全部忽略，这样布局就呈现出传统的单块布局。如果非要在这些浏览器中实现瀑布流布局效果，那就只能借助于JS插件了。

为了保证浏览器最大的兼容性，我们在使用多列布局属性时，最好添加浏览器引擎前缀，最基本的要加上三种：谷歌浏览器的-webkit-，火狐浏览器的-moz-，IE浏览器的-ms-，最后，别忘了不带前缀的写法。

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们，特别是需要自动平衡列高度的地方。