纯CSS3多列的瀑布流效果

发布时间:2020-02-18 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了纯CSS3多列的瀑布流效果脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是脚本之家 jb51.cc 通过网络收集整理的代码片段。脚本之家小编现在分享给大家,也给大家做个参考。

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

以上是脚本之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

总结

以上是脚本之家为你收集整理的纯CSS3多列的瀑布流效果全部内容,希望文章能够帮你解决纯CSS3多列的瀑布流效果所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: