DedeCMS织梦
纯CSS3多列的瀑布流效果
PetitQ
基于 CSS3 的瀑布流布局效果演示，瀑布流貌似现在比较火，最近用 CSS3 试着研究了一番，测试时候请使用火狐或 chrome 或世界之窗浏览器，若要使用 IE 浏览器查看本效果，请使用 IE9 以上版本的浏览器。
网上的瀑布流布局大部分都是通过 JS 来求定位，但现在 css3 也可以做到了，你不需要使用一点 js，就可以做出一个反应快速的 CSS3 瀑布流布局。
HTML 代码：
<div class="container">
<div style="height:80px" class="title">纯CSS3瀑布布局</div>
<div style="height:260px"></div>
．．．．．．
</div>
也想出现在这里？联系我们吧
css 代码：
<style>
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
}div:not(.container){
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#D9D9D9;
border::#CCC 1px solid;
display:inline-block;
width:157px;
position:relative;
margin:2px;
}.title{
line-height:80px; font-size:18px; color:#900;
text-align:center;
font-family:"Microsoft YaHei";
}</style>
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
