css做多列瀑布流

zoukankan html css js c++ java

css做多列瀑布流

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

            box-sizing:border-box;

        }

        section{

            100%;

            background:#4d3821;

            /* 列数 */

            column-count:5;

            /* 清除列间隔 */

            column-gap:8px;

        }

        figure{

            100%;

            border:4px solid pink;

            padding:8px;

            /* 防止断裂 */

            break-inside:avoid;

            margin-bottom:8px;

        }

        figure img{

            display:block;

            100%;

            /* 图片高度不能设置,等比缩放 */

        }

        figcaption{

            text-align:center;

            line-height:40px;

            font-size:20px;

            color:pink;

            font-weight:900;

        }

    </style>

</head>

<body>

    <section>

        <figure>

            <img src="./img/1.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/2.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/3.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/4.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/5.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/6.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/7.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/8.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/9.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/10.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/1.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/2.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/3.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/4.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/5.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/6.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/7.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/8.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/9.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/10.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/1.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/2.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/3.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/4.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/5.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/6.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/7.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/8.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/9.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/10.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/1.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/2.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/3.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/4.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/5.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/6.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/7.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/8.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/9.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/10.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/1.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/2.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/3.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/4.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/5.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/6.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/7.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/8.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/9.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/10.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/1.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/2.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/3.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/4.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/5.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/6.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/7.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/8.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/9.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

        <figure>

            <img src="./img/10.jpg" alt="">

            <figcaption>窈窕淑女，君子好逑</figcaption>

        </figure>

    </section>

</body>

</html>



右侧打赏一下代码改变世界一块二块也是爱

查看全文

相关阅读:
yum只下载不安装的方法
 在VS2008下编译Qt4.4.x
Linux sh脚本异常：bad interpreter: No such file or directory
动态链接库dll，静态链接库lib, 导入库lib 转
 Accumulation Buffer（累积缓存）
mysql中ip和整数的转换
 开车撞人了!
windows 下getc()返回0x1A表示EOF
NPC问题
 关于普华永道、麦肯锡和IBM的笑话

原文地址：https://www.cnblogs.com/ht955/p/15173157.html