zoukankan      html  css  js  c++  java
  • CSS3里的瀑布流效果

    页面伸缩之后,内部的布局会自动缩放,高度不同的内容也会自动以垂直瀑布的效果平铺。

    下面就是一部分代码:

    CSS:

    /*大层*/
        .container{80%;margin: 0 auto;}
        /*瀑布流层*/
        .waterfall{
            -moz-column-count:2; /* Firefox */
            -webkit-column-count:2; /* Safari 和 Chrome */
            column-count:2;
            -moz-column-gap: 1em;
          -webkit-column-gap: 1em;
          column-gap: 1em;
        }
        /*一个内容层*/
        .item{
          padding: 1em;
          margin: 0 0 1em 0;
          -moz-page-break-inside: avoid;
          -webkit-column-break-inside: avoid;
          break-inside: avoid;
         border: 1px solid #000;
        }
        .item img{
             100%;
            margin-bottom:10px;
        }

    HTML:

    <div class="container">
            <div class="waterfall">
                <div class="item">
                    <img src="img/111.jpg">
                    <p>1 convallis timestamp</p>
               </div>
    
                <div class="item">
                    <img src="img/222.jpg">
                    <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
               </div>
    
                <div class="item">
                    <img src="img/333.jpg">
                    <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
            faucibus suscipit. Suspendisse rutrum turpis quis nunc 
            convallis quis aliquam mauris suscipit.</p>
               </div>
    
                <div class="item">
                    <img src="img/3344.jpg">
                    <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
            sagittis vitae, egestas at augue. </p>
               </div>
    
                  <div class="item">
                    <img src="img/555.jpg">
                    <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
               </div>
            </div>
        </div>
  • 相关阅读:
    MYSQL-------安全等于<=>
    MYSQL-------转义简单说明
    Linux命令 sed
    长目录如何快速cd
    SQLAlchemy(增删改查)
    PostgreSQL主键约束混乱
    Python实现智能回复
    Python 腾讯云发送短信
    Python3 Twilio 发送短信
    Elasticsearch 多条件查询
  • 原文地址:https://www.cnblogs.com/zjingjing/p/7651177.html
Copyright © 2011-2022 走看看