zoukankan      html  css  js  c++  java
  • 新增column属性及瀑布流布局

    column列布局

    新增的column属性用来进行多列布局。注意新增属性需要些兼容前缀,如-moz-和-webkit- ,最大兼容到IE10

    • column-count 把当前div中的文本/元素划分为三列

      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari 和 Chrome */
      column-count:3;
      
    • column-gap 规定列间的间隔像素

      column-gap:40px;
      
    • column-rule 规定列之间的宽度、样式和颜色

      column-rule:3px solid #ff00ff;
      
    • column-span 允许一个元素的宽度跨越多列

      column-span: all;     /*取值all 或 none*/
      
    • column-width 每列的宽度

      column-100px;
      

    除了上述的几个常用的属性之外,还有

    • column-fill属性,此属性用于标识分列的高度是否统一。不过兼容性特别差,只支持Firefox。
    • break-beforebreak-afterbreak-inside属性,这三个属性是用于标识分列之间的行为的(是否中断列,默认允许

    瀑布流布局

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <style>
        body {
          margin: 0;
        }
    
        .waterfall-container {
          /*分几列*/
          column-count: 2;
           100%;
          /* 列间距 */
          column-gap: 10px;
        }
    
        .waterfall-item {
          /* 避免列出现中断 */
          break-inside: avoid;
           100%;
          height: 100px;
          margin-bottom: 10px;
          background: #ddd;
          column-gap: 0;
          text-align: center;
          color: #fff;
          font-size: 40px;
        }
      </style>
    </head>
    
    <body>
      <div class="waterfall-container">
        <div class="waterfall-item" style="height: 100px">1</div>
        <div class="waterfall-item" style="height: 300px">2</div>
        <div class="waterfall-item" style="height: 400px">3</div>
        <div class="waterfall-item" style="height: 100px;">4</div>
        <div class="waterfall-item" style="height: 300px">5</div>
        <div class="waterfall-item" style="height: 600px">6</div>
        <div class="waterfall-item" style="height: 400px">7</div>
        <div class="waterfall-item" style="height: 300px">8</div>
        <div class="waterfall-item" style="height: 700px">9</div>
        <div class="waterfall-item" style="height: 100px">10</div>
      </div>
    </body>
    
    </html>
    
  • 相关阅读:
    模拟一个弹出层
    mysql去重
    java 使用map返回多个对象组装
    java替换包含html标签
    java 给指定时间加上天数or给当前日期加天数
    js下载文件 阿星小栈
    Redis中Set集合命令 阿星小栈
    Mysql查询不为null值和字段为null 阿星小栈
    php求今天、昨天、明天时间戳的方法 阿星小栈
    PHP百分数转小数,php 小数转换百分数函数 阿星小栈
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/13701325.html
Copyright © 2011-2022 走看看