zoukankan      html  css  js  c++  java
  • 瀑布流的一些CSS实现方式

         一个选择是用CSS3的多列columns,可以参考这篇文章。但这篇文章给的例子并不怎么好理解,我做了一些更改,在每个元素上加了序号。可以看到,多列布局是在每一列上依次排列元素的,第一列排完才开始排第二列,因为这里规定了4列,会尽量把元素数量均分到每一列。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style type="text/css">
        .box{
            height: 123px;
            padding: 1em;
            margin-top: 1em;
            break-inside: avoid;
            border: 1px solid #000;
            background: #ccc;
        }
        .spe{
            height: 225px;
        }
        .box-wrapper{
            column-count:4;
            column-gap: 1em;
        }
      
      *{
        box-sizing:border-box;
      }
      .ggg{
        height: 100%;
        overflow-wrap: break-word
      }
    </style>
    <body>
      <div class="box-wrapper">
          <div style="margin-top:0px" class="box">1</div>
          <div class="box spe">2</div>
          <div class="box spe">3</div>
          <div class="box spe">4</div>
          <div class="box spe">5</div>
        <div class="box spe">6</div>
          <div class="box spe">7</div>
          <div class="box spe">8</div>
          <div class="box spe">9</div>
          <div class="box">10</div>
          <div class="box">11</div>
          <div class="box spe">12</div>
          <div class="box spe">13</div>
          <div class="box spe">14</div>
        <div class="box spe">15</div>
        <div class="box spe">16</div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box ggg">ssssdsdsdajj</div>
      </div>
    </body>
    </html>

     

    另外一种方式是使用flex,可以参考这篇文章  关于flex实现的更多细节没有再探究,目前项目中也没有遇到该类需求,把精力放在JS需求上。

  • 相关阅读:
    App开放接口api安全性—Token签名sign的设计与实现
    查看文件(或文件夹)被哪个进程使用【文件已在另一程序中打开】
    利用递归将数组转码
    h5 定位
    使用OAuth Server PHP实现OAuth2服务
    在Linux上安装jdk,mysql,tomcat的准备工作
    Core Java笔记
    随机森林简介
    Linux 查看操作系统版本
    RNA_seq GATK 最佳实践
  • 原文地址:https://www.cnblogs.com/zhansu/p/11021814.html
Copyright © 2011-2022 走看看