如何使用 CSS（和 JavaScript 替代方案）來建立磚石風格佈局？

使用CSS 創建磚石風格佈局

許多網頁設計師努力創建內容塊按列排列的佈局，每個塊都適應達到自己的高度，同時保持一致且美觀的外觀。這就是所謂的磚石風格佈局。

過去，僅靠 CSS 無法有效地達到這種效果。不過，隨著 CSS3 的出現，我們現在有了一個簡單的解決方案。

CSS3 解決方案

CSS3 引入了多列佈局的概念，允許開發者指定列數和列之間的間距。透過設定column-count和column-gap屬性，我們可以創建磚石風格的佈局。

例如，下面的CSS程式碼定義了一個具有兩列且它們之間有10像素間隙的容器：

.container {
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

容器內的每個項目將被迫佔據列內100% 的可用寬度。這意味著不同高度的塊將垂直堆疊，從而創建所需的磚石風格外觀。

非 CSS3 解決方案

如果您的專案不支援 CSS3，您需要使用 JavaScript 來實現磚石風格的佈局。有幾個可用的 JavaScript 程式庫，例如 Masonry 和 Isotope，可用於建立這些佈局。

以上是如何使用 CSS（和 JavaScript 替代方案）來建立磚石風格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！