純CSS3實現瀑布流布局
阿新 • • 發佈:2019-04-04
aso break bre ins png 技術 ide mas 純c
- html頁面結構
<div class="masonry"> <div class="item"> <img src="" > </div> <div class="item"> <img src="" > </div> <div class="item"> <img src="" > </div> ... </div>
- css樣式
.masonry { column-count: 3; } .item { break-inside: avoid; box-sizing: border-box; padding: 10px; } @media (min-width: 400px) { .masonry { column-count: 3; } } @media (min-width: 1200px) { .masonry { column-count: 4; } }
- 頁面效果
參考網站: https://www.w3cplus.com/css/pure-css-create-masonry-layout.html
純CSS3實現瀑布流布局