css瀑布流布局

作者：洃铯哖輪发布日期:2026-05-07 浏览:72

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 瀑布流布局</title>
    <style>
        /* 容器样式 */
        .waterfall {
            column-count: 3; /* 设置列数 */
            column-gap: 16px; /* 设置列间距 */
            margin: 0 auto;
            max-width: 1200px;
        }

        /* 单个卡片样式 */
        .card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 16px;
            padding: 16px;
            break-inside: avoid; /* 防止卡片被拆分到两列 */
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .waterfall {
                column-count: 2;
            }
        }

        @media (max-width: 480px) {
            .waterfall {
                column-count: 1;
            }
        }
    </style>
</head>
<body>
    <div class="waterfall">
        <!-- 示例卡片 -->
        <div class="card">内容 1</div>
        <div class="card">内容 2</div>
        <div class="card">内容 3</div>
        <div class="card">内容 4</div>
        <div class="card">内容 5</div>
        <div class="card">内容 6</div>
        <div class="card">内容 7</div>
        <div class="card">内容 8</div>
        <div class="card">内容 9</div>
    </div>
</body>
</html>

解释说明

容器样式：
- .waterfall 是瀑布流布局的容器，使用 column-count 属性来设置列数。这里设置了 3 列，并通过 column-gap 设置了列之间的间距。
- margin: 0 auto 和 max-width: 1200px 让容器在页面中居中显示。
单个卡片样式：
- .card 是每个项目的样式，设置了背景色、边框、圆角、阴影等效果，使其看起来更美观。
- break-inside: avoid 用于防止卡片被拆分到两列中。
响应式设计：
- 使用媒体查询（@media）来调整不同屏幕宽度下的列数。当屏幕宽度小于 768px 时，变为 2 列；当屏幕宽度小于 480px 时，变为 1 列。

这样就可以实现一个简单的 CSS 瀑布流布局。

上一篇：gap css

下一篇：css 图片翻转