使用css实现瀑布流的效果
生活随笔
收集整理的這篇文章主要介紹了
使用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实现瀑布流的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 古井贡酒年份原浆多少钱一瓶？
- 下一篇： 判断jQuery库是否被正确引入