溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS方式實現(xiàn)瀑布流

發(fā)布時間：2020-02-28 14:00:03 來源：網(wǎng)絡 閱讀：196 作者：Cherish純紫 欄目：開發(fā)技術 
<!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方式實現(xiàn)瀑布流

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手