左边固定右边自适应布局

最新推荐文章于 2022-07-04 20:56:04 发布

万水千山走遍TML

最新推荐文章于 2022-07-04 20:56:04 发布

阅读量61

点赞数

分类专栏： 💗💗CSS技术探索与实战💗💗

本文链接：https://blog.csdn.net/weixin_44885062/article/details/102710008

版权

💗💗CSS技术探索与实战💗💗 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>左边固定右边自适应布局</title>
  </head>
  <style type="text/css">
    /* 浮动实现 */
    .left{
        width: 200px;
        height: 500px;
        float:left;
        background: lightgreen;
    }
    .right {
      height: 500px;
      background: red;
    } 
    /* 定位实现 */
     .left{
        width: 200px;
        height: 500px;
        background:lightgreen;
        position:absolute;
    }
    .right{
        margin-left: 200px;
        height: 500px;
        background: yellowgreen;
    } 
    /* flex布局实现 */
    body{
        display: flex;
    }
    .left{
        height: 500px;
        flex: 0 0 300px;
        background: yellow;
    }
    .right{
        height: 500px;
        flex: 1;
        background: red;
    }
  </style>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>