这两个属性都可以实现多列布局,但是column-width 是响应式的,它可以在小屏幕上自动显示为单列布局
所以指定column-width 比column-count好
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .clm { column-width: 300px; } .clm div { break-inside: avoid; } </style> </head> <body> <div class="clm"> <div class="" style="width: 31px; height: 43px; background: red;"></div> <div class="" style="width: 33px; height: 53px; background: yellow;"></div> <div class="" style="width: 63px; height: 36px; background: blue;"></div> <div class="" style="width: 64px; height: 64px; background: black;"></div> <div class="" style="width: 45px; height: 27px; background: lightblue;"></div> <div class="" style="width: 54px; height: 67px; background: lightcoral;"></div> <div class="" style="width: 54px; height: 67px; background: lightcoral;"></div> <div class="" style="width: 67px; height: 98px; background: lightcyan;"></div> <div class="" style="width: 23px; height: 78px; background: lightgoldenrodyellow;"></div> <div class="" style="width: 54px; height: 23px; background: lightgray;"></div> <div class="" style="width: 78px; height: 89px; background: lightsalmon;"></div> </div> </body> </html>