两栏自适应布局6种方案（一侧定宽，一侧自适应宽度）

最新推荐文章于 2024-12-04 20:34:48 发布

Cassy_Wu

最新推荐文章于 2024-12-04 20:34:48 发布

阅读量3k

点赞数 4

CC 4.0 BY-SA版权

文章标签：两栏自适应布局左侧定宽，右侧自适应右侧定宽，左侧自适应前端布局前端面试

本文链接：https://blog.youkuaiyun.com/Cassy_Wu/article/details/85691070

本文总结了6种实现两栏布局的方法，包括左侧或右侧定宽，另一侧自适应宽度的布局。涵盖浮动、margin、BFC、position、display:table和flex布局。这些技巧对于前端开发者理解和解决面试题非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近看面试题，看到很多次类似的题目，左侧定宽右侧自适应，或右侧定宽左侧自适应。网上众说纷纭，示例很多缺少原理讲解。所以在此复习总结。希望能给初学者，自学者一些帮助吧。共勉。。。

目前我所知的主要6种方式

方法一：

固定宽度区域浮动，自适应区域设置margin(值 = 固定的宽)

原理：float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) 来控制自适应区域的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 1px solid;
            overflow: hidden; /*清浮动*/
        }
        .left{
            float: left;
            width: 200px;
            height: 500px;
            background-color: skyblue;
        }
        .right{
            height: 200px;
            background-color: pink;
            margin-left: 200px; /*值 = 固定的宽*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

左侧浮动定宽，右侧自适应
注：此种方法必须要把浮动的固定区域放在前面。因为浏览器的渲染顺序，自适应的区域会先撑满整个区域。否则如图所示

<body>
    <div class="box">
        <div class="right">右边自适应</div>
        <div class="left">左边固定宽度200</div>
    </div>
</body>

浮动的固定区域放在后面渲染
方法二：

固定宽度区域和自适应区域均浮动，自适应的宽度：calc(100% - 固定的宽)

原理：左右浮动布局，通过calc计算剩余宽度给自适应区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 1px solid;
            overflow: hidden; /*清浮动*/
        }
        .left{
            float: left;
            width: 200px;
            height: 500px;
            background-color: skyblue;
        }
        .right{
            float: right;
            height: 200px;
            background-color: pink;
            width: calc(100% - 200px); /*calc(100% - 固定的宽)*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

方法三

固定宽度区域浮动，自适应区域overflow:hidden/auto

原理：触发BFC（块级格式化上下文），形成自己的封闭空间。固定区域和自适应区域都触发BFC，且自适应区域流动性没有破坏，自然而然的占据了剩余的宽度。（^ _ ^overflow:scroll会产生滚动条所以不适用）
触发BFC的情况（想多了解的推荐张鑫旭的《css世界》）

根元素
float值不为none
overflow的值为auto、scroll和hidden
display的值为table-cell、table-caption、inline-block
position的值不为relative和static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
            width: 200px;
            height: 500px;
            background-color: skyblue;
        }
        .right{
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

BFC两栏自适应布局
方法四

固定宽度区域position:absolute，自适应区域设置margin(值 = 固定的宽)

原理同方法一二。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
        }
        .left{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 500px;
            background-color: skyblue;
        }
        .right{
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

左侧固宽绝对定位，右侧自适应
方法五

父元素设置display:table, 固定宽度区域和自适应宽度区域设置diplay:table-cell

原理：利用display: table-cell 子元素宽度之和等于父元素的宽度；如果有子元素未设置宽度，那么占据剩余所有宽度。如果子元素设置的宽度相加不等于100%，默认按子元素个数比例均分父元素宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: table;
            height: 500px;
            width: 100%;
        }
        .left{
            display: table-cell;
            width: 200px;
            background-color: skyblue;
        }
        .right{
            display: table-cell;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

display:table两栏自适应布局
方法六

flex布局(推荐)

flex: flex-grow, flex-shrink, flex-basis
flex-grow: 可以来扩展子元素的宽度（默认为0)，设置当前元素应该占据剩余空间的比例值。比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和.
flex-shrink: 定义收缩比例(默认值为1)，通过设置的值来计算收缩空间。比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和.
flex-basis：指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
        }
        .left{
            width: 200px;
            height: 500px;
            background-color: skyblue;
        }
        .right{
            flex: 1;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定宽度200</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

flex两栏自适应布局