使用CSS3属性Multi-columns实现瀑布流布局

最新推荐文章于 2022-04-15 13:27:12 发布

Dilomen

最新推荐文章于 2022-04-15 13:27:12 发布

阅读量944

点赞数

分类专栏： CSS 文章标签： CSS3

本文链接：https://blog.csdn.net/Dilomen/article/details/86538394

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用CSS3属性Multi-columns实现瀑布流布局

主要属性：

父容器：

column-count: 5; 规定的列数，设置5列
column-gap: 0; 规定的间隔距离

子容器：

break-inside: avoid; 不允许插入任何中断(包括了avoid-page：禁止出现任何分页符，avoid-column：禁止任何列断裂，avoid-region：禁止任何区域中断)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    .parent {
        /* 规定的列数，设置5列 */
        column-count: 5;
        /* 规定的间隔距离 */
        column-gap: 0;
    }

    .item {
        /* 不允许插入任何中断 */
        break-inside: avoid;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
    }

    .item__content_big {
        height: 250px;
        background: red;
    }

    .item__content_medium {
        height: 150px;
        background: blue;
    }

    .item__content_small {
        height: 100px;
        background: green;
    }

    @media (max-width: 1024px) {
        .parent {
            column-count: 4;
        }
    }

    @media (max-width: 860px) {
        .parent {
            column-count: 3;
        }
    }

    @media (max-width: 480px) {
        .parent {
            column-count: 2;
        }
    }
</style>

<body>
    <div class="parent">
        <div class="item">
            <div class="item__content_big"> </div>
        </div>
        <div class="item">
            <div class="item__content_small"> </div>
        </div>
        <div class="item">
            <div class="item__content_small"> </div>
        </div>
        <div class="item">
            <div class="item__content_big"> </div>
        </div>
        <div class="item">
            <div class="item__content_medium"> </div>
        </div>
        <div class="item">
            <div class="item__content_big"> </div>
        </div>
        <div class="item">
            <div class="item__content_medium"> </div>
        </div>
        <div class="item">
            <div class="item__content_small"> </div>
        </div>
        <div class="item">
            <div class="item__content_big"> </div>
        </div>
    </div>
</body>

</html>

Dilomen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3属性Multi-columns实现瀑布流布局

使用CSS3属性Multi-columns实现瀑布流布局主要属性：父容器：column-count: 5; 规定的列数，设置5列 column-gap: 0; 规定的间隔距离子容器：break-inside: avoid; 不允许插入任何中断(包括了avoid-page：禁止出现任何分页符，avoid-column：禁止任何列断裂，avoid-region：禁止任...
复制链接

扫一扫