CSS 可以在沒有 JavaScript 的情況下建立 Masonry 佈局嗎？

單獨使用 CSS 可以建立砌體式佈局嗎？

砌體式佈局具有以下特徵：

• 盒子的高度各不相同。
• 有些盒子很明顯

這樣的版面可以單獨透過 CSS 實現嗎？

CSS 方法

確實，有CSS3 支援是可行的：

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

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

非CSS3 方法

不幸的是，這種佈局在缺少JavaScript 的情況下需要JavaScript CSS3 支援。

以上是CSS 可以在沒有 JavaScript 的情況下建立 Masonry 佈局嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！