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

浏览数：29 / 时间：2015年06月09日

觉得腾讯微博微频道里的那种布局方式很好，在这里利用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;
}

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实现瀑布布局,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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