DedeCMS织梦

纯CSS3多列的瀑布流效果

创客主机
  基于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>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!