當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

使用css实现瀑布流的效果

發布時間：2023/11/27 生活经验 25 豆豆

生活随笔收集整理的這篇文章主要介紹了使用css实现瀑布流的效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用css實現瀑布流的效果主要是通過display:flex彈性布局的方式。
注意要設置列數
圖片的寬度要一致，否則圖片顯示會有問題

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用css來實現瀑布流的效果</title><style>.waterfall{padding:60px;/*設置列數*/columns:3;/*列之間的距離為0*/column-gap:0px;}.item-content{/*彈性布局*/display: flex;/*元素從左向右排列*/flex-direction: row;/*元素居中排列*/justify-content: center;/*align-items: center;*/background-color: mistyrose;border: 1px solid black;box-sizing:border-box;}img{width:300px;}</style>
</head>
<body>
<div class="waterfall"><div class="item"><div class="item-content"><img src="image/花瓣1.jpg" alt=""/></div></div><div class="item"><div class="item-content"><img src="image/花瓣2.jpg" alt=""/></div></div><div class="item"><div class="item-content"><img src="image/花瓣3.jpg" alt=""/></div></div><div class="item"><div class="item-content"><img src="image/花瓣4.jpg" alt=""/></div></div><div class="item"><div class="item-content"><img src="image/花瓣5.jpg" alt=""/></div></div></div>
</body>
</html>

總結

以上是生活随笔為你收集整理的使用css实现瀑布流的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。