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>
    <!--  
        防止元素断裂:
            break-inside:avoid;
    -->
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    日活跃用户统计函数
    统计学习方法(五)——决策树
    统计学习方法(四)——朴素贝叶斯法
    统计学习方法(三)——K近邻法
    统计学习方法(二)——感知机
    Hive UDAF开发之同时计算最大值与最小值
    hive UDAF开发入门和运行过程详解(转)
    Linux操作系统启动流程
    Linux目录的作用
    Linux分区
  • 原文地址:https://www.cnblogs.com/ht955/p/15173157.html
Copyright © 2011-2022 走看看