纯CSS3多列的瀑布流效果

以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家，仅供参考

基于 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>

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!