页面布局瀑布流的写法(CSS写法)

来源：互联网发布：海淀法院时代网络大厦编辑：程序博客网时间：2024/05/29 15:16

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>瀑布流布局</title><link rel="stylesheet" type="text/css" href="css/styleCSS.css"/></head><body><div id="main"><div class="box"><div class="pic"><img src="img/0.jpg"/></div></div><div class="box"><div class="pic"><img src="img/1.jpg"/></div></div><div class="box"><div class="pic"><img src="img/2.jpg"/></div></div><div class="box"><div class="pic"><img src="img/3.jpg"/></div></div><div class="box"><div class="pic"><img src="img/4.jpg"/></div></div><div class="box"><div class="pic"><img src="img/5.jpg"/></div></div><div class="box"><div class="pic"><img src="img/6.jpg"/></div></div><div class="box"><div class="pic"><img src="img/7.jpg"/></div></div><div class="box"><div class="pic"><img src="img/8.jpg"/></div></div><div class="box"><div class="pic"><img src="img/9.jpg"/></div></div><div class="box"><div class="pic"><img src="img/10.jpg"/></div></div><div class="box"><div class="pic"><img src="img/11.jpg"/></div></div><div class="box"><div class="pic"><img src="img/12.jpg"/></div></div><div class="box"><div class="pic"><img src="img/13.jpg"/></div></div><div class="box"><div class="pic"><img src="img/14.jpg"/></div></div><div class="box"><div class="pic"><img src="img/15.jpg"/></div></div><div class="box"><div class="pic"><img src="img/16.jpg"/></div></div><div class="box"><div class="pic"><img src="img/17.jpg"/></div></div><div class="box"><div class="pic"><img src="img/18.jpg"/></div></div><div class="box"><div class="pic"><img src="img/19.jpg"/></div></div><div class="box"><div class="pic"><img src="img/20.jpg"/></div></div><div class="box"><div class="pic"><img src="img/21.jpg"/></div></div><div class="box"><div class="pic"><img src="img/22.jpg"/></div></div><div class="box"><div class="pic"><img src="img/23.jpg"/></div></div><div class="box"><div class="pic"><img src="img/24.jpg"/></div></div><div class="box"><div class="pic"><img src="img/25.jpg"/></div></div><div class="box"><div class="pic"><img src="img/26.jpg"/></div></div><div class="box"><div class="pic"><img src="img/27.jpg"/></div></div><div class="box"><div class="pic"><img src="img/28.jpg"/></div></div><div class="box"><div class="pic"><img src="img/29.jpg"/></div></div><div class="box"><div class="pic"><img src="img/30.jpg"/></div></div><div class="box"><div class="pic"><img src="img/31.jpg"/></div></div><div class="box"><div class="pic"><img src="img/32.jpg"/></div></div><div class="box"><div class="pic"><img src="img/33.jpg"/></div></div><div class="box"><div class="pic"><img src="img/34.jpg"/></div></div><div class="box"><div class="pic"><img src="img/35.jpg"/></div></div><div class="box"><div class="pic"><img src="img/36.jpg"/></div></div><div class="box"><div class="pic"><img src="img/37.jpg"/></div></div><div class="box"><div class="pic"><img src="img/38.jpg"/></div></div><div class="box"><div class="pic"><img src="img/39.jpg"/></div></div><div class="box"><div class="pic"><img src="img/40.jpg"/></div></div><div class="box"><div class="pic"><img src="img/41.jpg"/></div></div><div class="box"><div class="pic"><img src="img/42.jpg"/></div></div><div class="box"><div class="pic"><img src="img/43.jpg"/></div></div><div class="box"><div class="pic"><img src="img/44.jpg"/></div></div><div class="box"><div class="pic"><img src="img/45.jpg"/></div></div><div class="box"><div class="pic"><img src="img/46.jpg"/></div></div><div class="box"><div class="pic"><img src="img/47.jpg"/></div></div></div></body></html>

*{margin: 0;padding: 0;}#main{position: relative;}.box{padding: 15px 0 0 15px; float: left;}.pic{padding: 10px; border: 1px solid #CCCCCC;border-radius: 5px; box-shadow: 0 0 5px #ccc;}.pic img{width: 165px; height: auto;}

0 0