zoukankan      html  css  js  c++  java
  • 6行css就可以解决的瀑布流布局的方法

    <body>
    <style>
    .parent { 
    100%;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    }
    .child {
    margin-bottom:20px;	 
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    color:#fff;
    }
    .child:nth-of-type(1){ height:100px; background:#000; }
    .child:nth-of-type(2){ height:120px; background:#111; }
    .child:nth-of-type(3){ height:140px; background:#222; }
    .child:nth-of-type(4){ height:160px; background:#333; }
    .child:nth-of-type(5){ height:180px; background:#444; }
    .child:nth-of-type(6){ height:200px; background:#555; }
    .child:nth-of-type(7){ height:220px; background:#666; }
    .child:nth-of-type(8){ height:240px; background:#777; }
    </style>
    <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    </div>
    </body>
    

      

  • 相关阅读:
    树链剖分
    后缀自动机
    莫队算法。
    线性递推BM模板
    笛卡尔积
    2019牛客暑期多校训练营(第三场) J LRU management 模拟链表操作
    线性基
    bitset 位运算
    Lindström–Gessel–Viennot lemma定理 行列式板子
    三角形
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/12114847.html
Copyright © 2011-2022 走看看