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>



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

查看全文

相关阅读:
日活跃用户统计函数
 统计学习方法（五）——决策树
 统计学习方法（四）——朴素贝叶斯法
 统计学习方法（三）——K近邻法
 统计学习方法（二）——感知机
 Hive UDAF开发之同时计算最大值与最小值
 hive UDAF开发入门和运行过程详解（转）
Linux操作系统启动流程
 Linux目录的作用
 Linux分区

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