三栏布局，左右固定中间自适应

日晞

已于 2023-08-24 16:42:37 修改

阅读量115

点赞数

分类专栏： HTML-CSS 文章标签： css css3 前端 html

于 2023-08-07 18:32:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44644385/article/details/132152285

版权

HTML-CSS 专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="father">
      <div class="left"></div>
      <div class="main"></div>
      <div class="right"></div>
    </div>
  </body>

  <style lang="css">
    /* 1.flex 布局 */
    /* .father {
      height: 50px;
      display: flex;
    }
    .left, .right, .main {
      height: 100%;
    }

    .left {
      width: 200px;
      background-color: red;
    }

    .main {
      flex: 1;
      background-color: blue;
    }

    .right {
      width: 200px;
      background-color: yellow;
    } */

    /* 2.绝对定位 */
    .father {
      height: 50px;
      position: relative;
    }
    .left,
    .right,
    .main {
      height: 100%;
    }

    .left {
      position: absolute;
      left: 0;
      width: 200px;
      background-color: red;
    }

    .main {
      position: absolute;
      left: 200px;
      right: 200px;
      background-color: blue;
    }

    .right {
      position: absolute;
      right: 0;
      width: 200px;
      background-color: yellow;
    }
  </style>
</html>