• css常用布局-多列布局(瀑布流)详解及案例

    在浏览器中所展示的宽度差不多，高度参差不齐，整体又很美观，呈现出瀑布流，这样的布局都属于多列布局。

    css布局的局限性是无法使用懒加载，js的瀑布流布局可以实现懒加载,详情请参考，https://www.cnblogs.com/piaoyi1997/p/12954660.html

    css3-多列

    多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。

    多列属性

    　　1、column-count

    　　　属性规定元素应该被分隔的列数

    　　2、column-gap

    　　　属性规定列之间的间隔大小

    　　3、column-rule　　　

    　　设置或检索对象的列与列之间的边框。复合属性。
    　　column-rule-color规定列之间规则的颜色。
    　　column-rule-style规定列之间规则的样式。
    　　column-rule-width规定列之间规则的宽度。

    　　4、column-fill

    　　设置或检索对象所有列的高度是否统一
    　　auto：列高度自适应内容
    　　balance：所有列的高度以其中最高的一列统一

    　　5、column-span　　

    　　设置或检索对象元素是否横跨所有列。
    　　none：不跨列
    　　all：横跨所有列

    　　6、column-width

    　　设置或检索对象每列的宽度

    　　效果图如下所示：

    具体实现代码如下：

    <!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;
            }
            body,html{
                 100%;
                height: 100%;
                background: url(./images/1.gif);
                background-size: 50% 50%;
            }
            .content{
                 100%;
                column-count: 5;
                column-gap: 0;           
            }
            .content div{
                border: 5px #eee solid;
                padding: 10px;
                margin: 0 5px 10px;
            }
            .content div img{
                 100%;
            }
            .content div p{
                text-align: center;
                font-size: 20px;
                color: #fff;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div>
                <img src="./images/2.jpg" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/2.jpg" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/3.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/4.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/5.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/6.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/7.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/8.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/9.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/10.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/11.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/12.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/13.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/14.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/15.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/16.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/17.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/1.gif" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/2.jpg" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/3.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/4.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/5.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/6.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/7.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/8.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/9.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/10.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/11.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/12.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/13.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/14.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/15.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/16.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
            <div>
                <img src="./images/17.png" alt="">
                <p>今后余生，风雪是你</p>
            </div>
        </div>
    </body>
    </html>
     
    如果感觉对自己有帮助，麻烦点一下关注，会一直盒大家分享知识的，谢谢！！！
  • 相关阅读:
    springboot 路由 json
    mybatis-plus 条件构造器 Wrapper
    mybatis-plus 逻辑删除
    mybatis-plus 分页查询
    mybatis-plus 乐观锁
    mybatis-plus 自动填充处理
    mybatis-plus 增删改查(普通)
    mybatis-plus 日志
    mybatis-plus 初识
    React项目如何打包发布及遇到的坑
  • 原文地址：https://www.cnblogs.com/piaoyi1997/p/12705092.html
Copyright © 2020-2023  润新知