前端面试场景题:两个盒子，左边固定宽，右边自适应，有几种方法?

原创

于 2022-07-28 15:27:53 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

本文介绍了前端开发中实现左侧固定宽度，右侧自适应的布局问题，包括float配合BFC、absolute定位、calc函数计算、flex布局、table布局以及inline-block结合calc方法等六种解决方案。详细探讨了每种方法的适用场景和实现细节。

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

公共HTML代码部分

<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>

方法一：float来和BFC实现

<style>
.content {
   
   
   border: 1px solid #000;
   height: 800px;
   padding: 20px;
}
.left {
   
   
   width: 200px;
   height: 100%;
   background: red;
   float: left;
}
.right {
   
   
   height: 100%;
   background: pink;
   overflow: hidden;
}
</style>