HTML5+CSS3网页制作实例:chinaz图片瀑布布局

2024-09-05 07:18:42

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS3瀑布布局</title><style> .container{ -webkit-column-width:160px; -moz-column-width:160px; -o-colum-width:160px; -webkit-column-gap:1px; -moz-column-gap:1px; -o-column-gap:1px; } div:not(.container){ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#D9D9D9; border::#CCC 1px solid; display:inline-block; width:157px; position:relative; margin:2px; } .title{ line-height:80px; font-size:18px; color:#900; text-align:center; font-family:"Microsoft YaHei"; }</style></head><body><section> <div class="container"> <div style="height:80px" class="title">纯CSS3瀑布布局</div> <div style="height:260px"></div> <div style="height:65px"></div> <div style="height:120px"></div> <div style="height:145px"></div> <div style="height:90px"></div> <div style="height:145px"></div> <div style="height:160px"></div> <div style="height:65px"></div> <div style="height:230px"></div> <div style="height:140px"></div> <div style="height:85px"></div> <div style="height:20px"></div> <div style="height:145px"></div> <div style="height:50px"></div> <div style="height:65px"></div> <div style="height:230px"></div> <div style="height:140px"></div> <div style="height:85px"></div> <div style="height:20px"></div> <div style="height:145px"></div> <div style="height:50px"></div> <div style="height:145px"></div> <div style="height:160px"></div> <div style="height:240px"></div> </div></section></body></html>运行效果(FireFox，Google Chrome下测试通过，其他浏览器未做测试~~)：