Maker Cloud
创客云专注高端网站设计与开发!

纯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>

WordPress主机推荐:创客主机 | 承接wordpress主题|插件汉化服务!(联系客服
分享到: 更多 (0)

评论 抢沙发

您必须登录后发表评论!

 

本站承接WordPress/DedeCMS等系统建站、仿站、开发、定制等服务!

关于我们联系我们
嘿,欢迎咨询!