zoukankan      html  css  js  c++  java
  • CSS实现瀑布流布局

    html标签格式

    <div class="box">
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="show.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="cloth.jpg" alt="" />
        </div>
        <div class="item">
            <img  src="banner.jpg" alt="" />
        </div>
    </div>

    一、flex 弹性布局实现瀑布流

            .box {
              display: flex;  
              flex-flow:column wrap;
              height: 100vh;
            }
            .item {
                margin: 10px;
                width: calc(100%/3 - 20px);     //这里要展示几列就除于几
            }
            .item img{
                width: 100%;
                height:100%;
            }    

    二、column 多行布局实现瀑布流

    column 实现瀑布流主要依赖两个属性。
    一个是 column-count 属性,是分为多少列。
    一个是 column-gap 属性,是设置列与列之间的距离。

            .box {
                margin: 10px;
                column-count: 3;
                column-gap: 10px;
            }
            .item {
                margin-bottom: 10px;
            }
            .item img{
                width: 100%;
                height:100%;
            }
  • 相关阅读:
    十八、分页查询
    十七、oracle的权限和角色
    十六、同义词(synonyms)
    十五、序列
    十四、禁用与启动约束
    十三、修改表时添加约束
    十二、约束
    十一、修改表格
    十、事务(Transaction)
    Windows 远程连接后,自动断开,所有程序都自动关闭(待验证,待更新)
  • 原文地址:https://www.cnblogs.com/chensv/p/13930615.html
Copyright © 2011-2022 走看看