【前端面试必读】实现三列两边固定宽度，中间自适应布局

最新推荐文章于 2022-03-30 16:15:15 发布

爱焰

最新推荐文章于 2022-03-30 16:15:15 发布

阅读量247

点赞数

分类专栏：面试文章标签：前端面试 css3

本文链接：https://blog.csdn.net/a_soulmate/article/details/122640024

版权

面试专栏收录该内容

14 篇文章 5 订阅

订阅专栏

calc实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100%;
            height: 100%;
        }
        .left,.right{
            width: 100px;
            height: 100vh;
            background: red;
            float: left;
        }
        .center{
            width: calc(100% - 200px);
            height: 100vh;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
   <div class="wrap">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
   </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
           margin: 0;
           padding: 0;
       }
       .wrap{
           display: flex;
       }
       .left,.right{
           flex: 0 0 100px;
           height: 100vh;
           background: red;
       }
        .center{
            flex: 1 1 auto;
            height: 100vh;
            background: blue;
        }
    </style>
</head>
<body>
   <div class="wrap">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
   </div>
</body>
</html>