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

  • 相关阅读:
    c语言提高学习笔记——02-c提高07day
    c语言提高学习笔记——02-c提高06day
    c语言提高学习笔记——02-c提高05day
    c语言提高学习笔记——02-c提高04day
    c语言提高学习笔记——02-c提高03day
    菜鸡的 分块 刷题记录
    是输入输出的小技巧和细节们
    蒟蒻的 线性基 刷题记录
    曼哈顿距离,欧几里得距离学习笔记
    用 Github.io 和 Hexo 创建你的第一个博客
  • 原文地址:https://www.cnblogs.com/mooniitt/p/6768917.html
Copyright © 2011-2022 走看看