如何僅使用 CSS 建立砌體佈局？

使用CSS 創建磚石風格佈局

僅透過CSS 實現磚石風格佈局，其中元素具有不同的高度和寬度長期以來一直是個挑戰。隨著CSS3的出現，這個挑戰已經被克服。

CSS3解決方案

CSS3引入了column-count屬性，它允許您指定列的數量應該佈置哪些內容。透過將此屬性與定義列之間間距的 column-gap 屬性結合，可以創建磚石風格的佈局。

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

.container div {
  display: inline-block;
  width: 100%;
  background-color: red;
}

在此程式碼中， .container 元素定義了兩列它們之間有 10px 的間隙。 .container div 元素佈置在這些列中，每個元素跨越列的整個寬度。

非 CSS3 解決方案

不幸的是，對於以下瀏覽器不支援CSS3，僅透過CSS無法實現磚石風格的佈局。在這種情況下，您可能需要藉助 JavaScript 函式庫來實現此目的。

以上是如何僅使用 CSS 建立砌體佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！