zoukankan      html  css  js  c++  java
  • CSS实现随屏幕宽高适配的等分九宫格

    方法一:
    table实现(不推荐)
    设置html,body,table宽高为100%;
    缺点:如果td中的内容超出了,那么格子大小就会改变。

    方法二:
    flex布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        html,body {
           100%;
          height: 100%;
        }
        .box>div {
           calc(100%/3);
          height: calc(100%/3);
          border: 1px solid #aff;
          box-sizing: border-box;
        }
        .box {
           100%;
          height: 100%;
          background-color: #ffa;
          display: flex;
          flex-wrap: wrap;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>
    </body>
    </html>
    
  • 相关阅读:
    修改注释的风格
    PHP in_array
    PHP end
    PHP each
    GitHub和SourceTree入门教程
    面试题解析(不定时更新)
    Container With Most Water
    Minimum Path Sum
    Generate Parentheses
    Unique Paths
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/14705848.html
Copyright © 2011-2022 走看看