.body { margin:0; padding:0; background:#333; } .container { width:1200px; margin:20px auto; columns:4; column-gap:40px; } .container .box { width:100%; margin:0 0 20px; padding:10px; background:#fff; overflow:hidden; break-inside:avoid; } .container .box img { max-width:100%; } @media(max-width:1200px) { .container { columns:3; width:calc(100% - 40px); box-sizing:border-box; padding:20px 20px 20px 0; } }@media(max-width:768px) { .container { columns:2; } }@media(max-width:480px) { .container { columns:1; } }
更新时间:2020-03-09 12:14:18
几句css代码就可以实现瀑布流。还加了自适应。