純css3 瀑布流佈局
阿新 • • 發佈：2022-03-09
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .box { height: 123px; padding: 1em; margin-top: 1em; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; border: 1px solid #000; background: #909090; } .spe { height: 225px; } .box-wrapper { column-count: 2; /* column-gap: 0; */ } </style> </head> <body> <div class="box-wrapper"> <div style="margin-top:0px" class="box">1</div> <div class="box spe">2</div> <div class="box spe">3</div> <div class="box spe">4</div> <div class="box spe">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box spe">8</div> <div class="box spe">9</div> </div> </body> </html>
1 2 3 4 5 6 7 8 9