订阅汇聚素材网Feed

CSS3瀑布布局

在head中加入CSS3瀑布布局如下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;
}
</style>

在body中加入CSS3瀑布布局如下代码:

<div>
<div style=”height:80px”>CSS3瀑布布局开始</div>
<div style=”height:260px”></div>
<div style=”height:65px”></div>
<div style=”height:120px”></div>
<div style=”height:145px”></div>
<div style=”height:90px”></div>
<div style=”height:145px”></div>
<div style=”height:160px”></div>
<div style=”height:65px”></div>
<div style=”height:230px”></div>
<div style=”height:140px”></div>
<div style=”height:85px”></div>
<div style=”height:20px”></div>
<div style=”height:145px”></div>
<div style=”height:50px”></div>
<div style=”height:65px”></div>
<div style=”height:230px”></div>
<div style=”height:140px”></div>
<div style=”height:85px”></div>
<div style=”height:20px”></div>
<div style=”height:145px”></div>
<div style=”height:50px”></div>
<div style=”height:145px”></div>
<div style=”height:160px”></div>
<div style=”height:240px”>CSS3瀑布布局结束</div>
</div>

4 人Likes
  

文章转载请注明:CSS3瀑布布局-汇聚素材网

本文固定链接:http://www.webhj.com/hj-501.html  +复制链接

CSS3瀑布布局:等您坐沙发呢!

发表评论

*

*

0 + 2

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍