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中文网其他相关文章！