CSS基础-32CSS瀑布流效果

来源：互联网发布：淘宝图片空间批量删除编辑：程序博客网时间：2024/06/10 18:22
<!DOCTYPE html><!--CSS瀑布流效果--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="css11.css" type="text/css" rel="stylesheet"></head><body>   <div class="rongqi">       <div> <img src="images/mm1.jpg">       <p>我爱美女</p>       </div>       <div> <img src="images/mm2.jpg"></div>       <div> <img src="images/mm3.jpg"></div>       <div> <img src="images/mm4.jpg"></div>       <div> <img src="images/mm5.jpg">           <p>我爱美女</p>       </div>       <div> <img src="images/mm6.jpg"></div>       <div> <img src="images/mm7.jpg"></div>       <div> <img src="images/mm8.jpg"></div>       <div> <img src="images/mm9.jpg"></div>       <div> <img src="images/mm10jpg">           <p>我爱美女</p>       </div>       <div> <img src="images/mm11.jpg"></div>       <div> <img src="images/mm12.jpg"></div>       <div> <img src="images/mv1.jpg"></div>       <div> <img src="images/mv2.jpg"></div>       <div> <img src="images/mv3.jpg"></div>       <div> <img src="images/mv4.jpg"></div>       <div> <img src="images/mv5.jpg"></div>       <div> <img src="images/mv6.jpg"></div>       <div> <img src="images/mv7.jpg"></div>       <div> <img src="images/mv8.jpg"></div>       <div> <img src="images/mv9.jpg"></div>   </div></body></html>
css:
.rongqi{    /*column-count 分列的数量*/    column-width: 250px;    /*支持 chrome safari浏览器*/    -webkit-column-width: 250px;    /*column-gap每列之间的间隔距离*/    column-gap: 10px;    /*支持 chrome safari浏览器*/    -webkit-column-gap: 10px;}.rongqi div{    width: 250px;    margin: 5px 0px;}.rongqi p{    text-align: center;}
0 0