布局之多列布局（multi-column） 瀑布流 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
         布局之多列布局（multi-column）
         column-count：设置列的个数。数字为想要把文章分为的列数，浏览器会自动计算每 列的宽度。
         column-width：设置每列的宽度。设置后，浏览器会根据设置的宽度自动计算调整列数，如果宽度不足两列，则只显示一列，宽度设置也将失效。
         column-gap(列间隙)：建议值为1em
         下面的a标签 不能添加 margin 否则左边最下面的图片 就会跑到右边最上面
    -->
    <style>
        .contain {
            background: url(../images/ly_bg.png) bottom no-repeat #f2e9dc;
            background-size: 100%;
            height: calc(100vh - 208px);
            overflow-y: scroll;
        }

        .box {
            width: 90%;
            background: #FCF8EB;
            border-radius: 5px;
            margin: 5px auto 10px auto;
        }

        .list {
            column-gap: 10px;
            column-count: 2;
        }

        .list .item {
            display: block;
            page-break-inside: avoid;
            width: 100%;
        }

        .list .item img {
            width: 100%;
            border-radius: 5px;
        }

        a {
            margin-bottom: 20px;
        }
    </style>
    <div class="contain">
        <div class="box">

            <div class="list">
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台1</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台2</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台3</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台4</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台5</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台6</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台7</p>
                </a>
                <a href="#" class="item">
                    <img
                        src="https://img0.baidu.com/it/u=2900945005,3681184471&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677862800&t=a5ab092418d1b6bc2c9b9f1f57ea9700" />
                    <p>水镜台8</p>
                </a>

            </div>
        </div>
    </div>


</body>

</html>
posted @ 2023-03-06 11:23  InMyHeart,OnlyYou  阅读(40)  评论(0)    收藏  举报