CSS基础-32CSS瀑布流效果

最新推荐文章于 2025-06-01 16:30:00 发布

zhaihaohao1

最新推荐文章于 2025-06-01 16:30:00 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/47208415

css基础专栏收录该内容

38 篇文章

订阅专栏

本文展示了如何使用CSS创建瀑布流布局来优雅地展示一组美女图片，通过定义特定的CSS类和属性，实现图片的自动排列和适应不同屏幕大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;
}