zoukankan      html  css  js  c++  java
  • css 布局

    两边固定宽度,中间自适应

    <html>

      <style>

        html,body{

          height:100%;

        }

        .left,.right,.center{

          height:100%;

        }

        .left{

          300px;

          position:absolute;

          left:0;

          background-color:red;

        }

        .right{

          300px;

          position:absolute;

          right:0;

          background-color:blue; 

        }

        .center{

          100%;

          margin-left:300px;

          margin-right:300px;

          background-color:green;

        }

      </style>

      <body>

        <div class="left"></div>

        <div class="right"></div>

        <div class="center"></div>

      </body>

    </html>

    两边自适应,中间固定

    <html>

      <style>

        html,body{

          height:100%;

        }

        .left,.right,.center{

          height:100%;

        }

        .left{

          position:absolute;

          left:0;

          right:50%;

          margin-right:150px;

          background-color:red;

        }

        .right{

          position:absolute;

          left:50%;

          right:0;

          margin-left:150px;

          background-color:blue;

        }

        .center{

          300px;

          position:absolute;

          left:50%;

          margin-left:150px;

          background-color:green;

        }

      </style>

      <body>

        <div class="left"></div>

        <div class="right"></div>

        <div class="center"></div>

      </body>

    </html>

    使用table-cell实现三栏布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>使用table-cell 实现三栏布局,左右定宽中间自适应</title>
    <style>
    .parent {
      display: table;
       100%;
    }
    .parent> div {
      display: table-cell;
      height: 200px;
      border: 1px solid red;
      box-sizing: border-box;
    }
    .left {
       100px;
    }
    .right {
       200px;
    }
    </style>
    </head>
    <body>
      <div class="parent">
        <div class="left">Left</div>
        <div class="main">Main</div>
          <div class="right">Right</div>
      </div>
    </body>
    </html>

     

    一劳永逸的搞定 flex 布局

    https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

  • 相关阅读:
    Action中使用Json
    QueryHelper插件类(hql)
    StrutsResultSupport的使用
    使用POI操作Excel
    对于response.setContentType(MIME)的解释
    通过反射技术获取泛型真实实例
    spring中context:property-placeholder
    SSH整合需要的jar包
    SSH整合主要XML代码
    设置三思LED的IP地址跟端口号
  • 原文地址:https://www.cnblogs.com/mooniitt/p/6768917.html
Copyright © 2011-2022 走看看