前端面试题：场景题(两个盒子，左边固定宽，右边自适应，你能想到几种方法)
· 公共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>
· 方法二：absolute定位和margin值实现
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}
.left {
width: 200px;
height: 100%;
background: red;
position: absolute;
}
.right {
height: 100%;
background: pink;
margin-left: 200px;
}
</style>
· 方法三：calc(100% - 固定内容的宽度) 用calc函数动态计算数值
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}
.left {
width: 200px;
height: 100%;
background: red;
float: left;
}
.right {
height: 100%;
background: pink;
float: left;
width: calc(100% - 200px);
}
</style>
· 方法四：flex布局轻松搞定
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
display: flex;
}
.left {
width: 200px;
height: 100%;
background: red;
}
.right {
height: 100%;
background: pink;
flex: 1;
}
</style>
· 方法五：使用table和table-cell实现
<style>
.content {
border: 1px solid #000;
width: 100%;
height: 800px;
display: table;
}
.left {
width: 200px;
height: 100%;
background: red;
display: table-cell;
}
.right {
height: 100%;
background: pink;
display: table-cell;
}
</style>
· 方法六：使用inline-block携手calc函数设置宽度
<style>
.content {
border: 1px solid #000;
width: 100%;
height: 800px;
font-size: 0;
}
.left {
width: 200px;
height: 100%;
background: red;
display: inline-block;
vertical-align: top;
}
.right {
height: 100%;
background: pink;
display: inline-block;
vertical-align: top;
width: calc(100% - 200px);
font-size: 16px;
}
</style>
更多关于前端培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。
