DedeCMS织梦

纯CSS3多列的瀑布流效果

也想出现在这里?联系我们
创客主机

  基于 CSS3 的瀑布流布局效果演示,瀑布流貌似现在比较火,最近用 CSS3 试着研究了一番,测试时候请使用火狐或 chrome 或世界之窗浏览器,若要使用 IE 浏览器查看本效果,请使用 IE9 以上版本的浏览器。
  网上的瀑布流布局大部分都是通过 JS 来求定位,但现在 css3 也可以做到了,你不需要使用一点 js,就可以做出一个反应快速的 CSS3 瀑布流布局。

html 代码:

  1. <div class="container">
  2.             <div style="height:80px" class="title">纯CSS3瀑布布局</div>
  3.         <div style="height:260px"></div>
  4.         ......
  5.     </div>

css 代码:

  1. <style>
  2.         .container{
  3.                 -webkit-column-width:160px;
  4.                 -moz-column-width:160px;
  5.                 -o-colum-width:160px;
  6.                 -webkit-column-gap:1px;
  7.                 -moz-column-gap:1px;
  8.                 -o-column-gap:1px;
  9.         }
  10.         div:not(.container){
  11.                 -webkit-border-radius:5px;
  12.                 -moz-border-radius:5px;
  13.                 border-radius:5px;
  14.                 background:#D9D9D9;
  15.                 border::#CCC 1px solid;
  16.                 display:inline-block;
  17.                 width:157px;
  18.                 position:relative;
  19.                 margin:2px;
  20.         }
  21.         .title{
  22.                  line-height:80px; font-size:18px; color:#900;
  23.                  text-align:center;
  24.                  font-family:"Microsoft YaHei";
  25.         }
  26. </style>
(0)

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

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

嘿,欢迎咨询!