<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流佈局</title>
<style type="text/css">
body{
background: #AAFFEE;
margin:10px;
}
#page{
width:888px;
margin: 0 auto;
}
.col{
column-count:3;/*行*/
column-gap: 10px; /*沒行的每列間距*/
column-fill: auto;
}
.pic{
box-sizing: border-box;
width: 290px;
background: #FFF;
padding: 20px;
box-shadow: 0 0 5px rgba(0,0,0,.5);
margin-bottom: 10px;
/*display: inline-block;*/
}
.pic img{
width: 260px;
}
</style>
</head>
<body>
<div id="page">
<div class="col">
<div class="pic">
<img src="img/1.jpg">
<!--<p>埃菲爾鐵塔（法語：La Tour Eiffel）設計新穎獨特，是世界建築史上的技術傑作，因而成爲法國和巴黎的一個重要景點和突出標誌。</p>-->
</div>
<div class="pic">
<img src="img/2.jpg">
<!--<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>-->
</div>
<div class="pic">
<img src="img/9.jpg">
<!--<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>-->
</div>
<div class="pic">
<img src="img/4.jpg">
<!--<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>-->
</div>
<div class="pic">
<img src="img/5.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/6.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/7.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/8.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/9.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/10.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/2.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/3.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/5.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/7.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/2.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/9.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/10.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/3.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/2.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/9.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/10.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/3.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/2.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/9.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/10.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/3.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/2.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/9.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/10.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/3.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/2.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/9.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/10.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/3.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
<div class="pic">
<img src="img/1.jpg">
<p>北京故宮是中國明清兩代的皇家宮殿，舊稱爲紫禁城，被譽爲世界五大宮之首。</p>
</div>
</div>
</div>
</body>
</html>Css3瀑布流效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.