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>



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

查看全文

相关阅读:
c++错误：不允许使用抽象类类型 "Employee" 的对象
 C++ error C2027:使用了未定义类型类的调用顺序
 PyCharm 2020.1 激活教程
 mysql组内排序
 XGBoost
React学习——Hello, React
Lambda表达式
 plsql链接远程oracle服务器，以及常用配置
 静态网站 H5 跳小程序（短信跳小程序）
更新（D-U-N-S）邓白氏码公司信息（注册勿看）

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