“纯 CSS 解决方案”：无需一行 JS，轻松实现高度不同的瀑布流布局

月_鸟.

于 2024-10-12 09:29:59 发布

阅读量137

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/asd_fghj159/article/details/142869376

版权

实现方式： 通过纯 CSS 实现，不需要额外的 JavaScript。

<style>
  .container {
    column-count: 3;
    column-gap: 10px;
  }

  .item {
    break-inside: avoid;
    margin-bottom: 10px;
  }
</style>

<div class="container">
  <div class="item" style="background-color: lightblue; height: 200px;"></div>
  <div class="item" style="background-color: lightgreen; height: 150px;"></div>
  <div class="item" style="background-color: lightcoral; height: 300px;"></div>
  <!-- 更多元素... -->
</div>