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>



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

查看全文

相关阅读:
java连接远程linux的redis
Mac下Sublime Text 3安装配置
 矩阵覆盖
 Mac下配置Tomcat
用 O(1) 时间检测整数 n 是否是 2 的幂次。
快速编程之禅
 如何在centos 7.4 上安装 python 3.6
大众点评实时监控系统CAT的那些坑
 如何在 centos 7.3 上安装 caffe 深度学习工具
 为什么中文编程项目失败率特别高?

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