<div class="masonry"> <div class="item"> <img src="" > </div> <div class="item"> <img src="" > </div> <div class="item"> <img src="" > </div> ... </div>
.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
原文:https://www.cnblogs.com/dadouF4/p/10655262.html