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

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title></title>
     8     <style type="text/css">
     9         * {margin: 0;padding: 0;}
    10         .pool {column-count: 2;width: 100%;column-width: auto;font-size: 0;column-gap: 6px;}
    11         .pool > div {background-color: pink;width: 100%;border: 1px solid red;box-sizing: border-box;
    12             display: inline-block;margin-bottom: 6px;}
    13         .h1 {height: 100px;}
    14         .h2 {height: 80px;}
    15         .h3 {height: 50px;}
    16     </style>
    17 </head>
    18 <body>
    19     <div id="app">
    20         <div class="pool">
    21             <div class="h1"></div>
    22             <div class="h2"></div>
    23             <div class="h3"></div>
    24             <div class="h2"></div>
    25             <div class="h1"></div>
    26         </div>
    27     </div>
    28 </body>
    29 </html>

     

  • 相关阅读:
    逆向测试设计
    JNLP
    3. 技术专题
    8.2. Angular使用Material控件库
    Spring Boot Actuator
    安装
    apk文件结构及反编译/代码混淆
    Visual Studio中attach进程进行调试
    .NET反编译
    3. 技术专题
  • 原文地址:https://www.cnblogs.com/qiuxd/p/13035277.html
Copyright © 2011-2022 走看看