CSS方式实现瀑布流

发布时间：2020-02-28 14:00:03 作者：Cherish纯紫
来源：网络阅读：206

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
    }

    .container {
      /* 分几列 */
      column-count: 3;
      /* 每列之间的距离 */
      column-gap: 10px;
    }

    .item {
      /* 避免当前元素的中断点 */
      break-inside: avoid-column;
      width: 100%;
      margin-bottom: 10px;
      background: #eee;
      text-align: center;
      color: black;
      font-size: 40px;
    }
  </style>
</head>

<body>
 <div class="container">
    <div class="item" >1</div>
    <div class="item" >2</div>
    <div class="item" >3</div>
    <div class="item" >4</div>
    <div class="item" >5</div>
    <div class="item" >6</div>
    <div class="item" >7</div>
    <div class="item" >8</div>
    <div class="item" >9</div>
    <div class="item" >10</di>
    </div>
</body>

</html>

效果图
CSS方式实现瀑布流

CSS方式实现瀑布流

相关阅读