码迷,mamicode.com
首页 > Web开发 > 详细

玩转CSS3(二)---CSS3实现瀑布布局

时间:2014-06-08 04:11:54      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

觉得腾讯微博微频道里的那种布局方式很好,在这里利用CSS3简单的实现了一下。

先上一张效果图:

bubuko.com,布布扣


代码:

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;
}

pubu.html:

<!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

玩转CSS3(二)---CSS3实现瀑布布局

标签:c   style   class   blog   code   java   

原文地址:http://blog.csdn.net/u012116457/article/details/29182925

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!