CSS瀑布流底部對(duì)齊的實(shí)現(xiàn)方法

在CSS中，我們可以通過(guò)設(shè)置底部邊距（bottom margin）來(lái)實(shí)現(xiàn)瀑布流底部對(duì)齊，以下是一個(gè)簡(jiǎn)單的示例：

HTML結(jié)構(gòu)：

<div class="waterfall">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

CSS樣式：

.waterfall {
  column-count: 3; /* 設(shè)置列數(shù) */
  column-gap: 10px; /* 設(shè)置列間距 */
}
.item {
  break-inside: avoid; /* 避免在元素內(nèi)部斷開(kāi) */
  margin-bottom: 20px; /* 設(shè)置底部邊距 */
}

在這個(gè)示例中，我們?cè)O(shè)置了一個(gè)名為waterfall的容器，其中包含了多個(gè)item元素，通過(guò)column-count屬性，我們指定了容器中的列數(shù)，并通過(guò)column-gap屬性設(shè)置了列間距，在item元素中，我們通過(guò)break-inside屬性避免了在元素內(nèi)部斷開(kāi)，并通過(guò)margin-bottom屬性設(shè)置了底部邊距，這樣，就可以實(shí)現(xiàn)瀑布流底部對(duì)齊的效果了。