标签:c style class blog code java
觉得腾讯微博微频道里的那种布局方式很好,在这里利用CSS3简单的实现了一下。
先上一张效果图:
代码:
pubu.css
/* CSS Document */ .container{ width:60%; margin-left:20%; margin-right:20%; background:#61A5D1; float:right; /*盒子*/ -webkit-column-width:160px; -moz-column-width:160px; -o-colum-width:160px; -webkit-column-gap:1px; -moz-column-gap:1px; -o-column-gap:1px; } .box{ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#D9D9D9; border::#CCC 1px solid; display:inline-block; width:180px; /*当把大小调成200,就会左右重合,不知道是什么问题*/ position:relative; margin:5px; }
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <link href="style/pubu.css" rel="stylesheet" type="text/css" /> <title>CSS3瀑布布局</title> </head> <body> <div class="container"> <!--经过试验,这里只能写成class="container“,如果写成id="container"会变成底部对齐--> <div class="box"><img src="image/1.jpg" width="180px" />别小看我,我绝对不会放弃。我接受考试,就算一生只能当下忍,我也会成为火影给你们看的,没什么了不起的。——漩涡鸣人。(明天高考,做一个永远追梦的人)#火影忍者#</div> <div class="box"><img src="image/2.jpg" width="180px" />我们依然坚强战胜每一次挫折,只是因为我们还活着.#火影忍者#</div> <div class="box"><img src="image/3.jpg" width="180px" />你只看到我在不停的忙碌,却没看到我奋斗的热情。你有朝九晚五,我有通宵达旦。你否定我的现在,我决定我的未来。你可以轻视我的存在,我会用代码证明这是谁的时代!梦想是注定孤独的旅行,路上少不了质疑和嘲笑,但那又怎么样 。哪怕遍体鳞伤 也要coding。我是java程序员 我为自己代言!</div> <div style="height:150px" class="box"></div> <div style="height:320px" class="box"></div> <div style="height:340px" class="box"></div> <div style="height:220px" class="box"></div> <div style="height:270px" class="box"></div> <div style="height:220px" class="box"></div> <div style="height:220px" class="box"></div> </div> </body> </html>
玩转CSS3(二)---CSS3实现瀑布布局,布布扣,bubuko.com
标签:c style class blog code java
原文地址:http://blog.csdn.net/u012116457/article/details/29182925