每天一道前端面试题：左边宽度固定，右边⾃适应

iOSSir

发布于 2020-07-24 09:53:38

4070

发布于 2020-07-24 09:53:38

左侧固定宽度，右侧⾃适应宽度的两列布局实现

html结构

<div class="outer">
 <div class="left">固定宽度</div>
 <div class="right">⾃适应宽度</div>
</div>

在外层 div （类名为 outer ）的 div 中，有两个⼦ div ，类名分别为left 和 right ，其中 left 为固定宽度，⽽ right 为⾃适应宽度

⽅法1：左侧div设置成浮动：float: left，右侧div宽度会⾃拉升适应

.outer {
width: 100%;
height: 500px;
background-color: yellow; }
.left {
width: 200px;
height: 200px;
background-color: red;
float: left; }
.right {
height: 200px;
background-color: blue; }

⽅法2：对右侧:div进⾏绝对定位，然后再设置right=0，即可以实现宽度⾃适应

绝对定位元素的第⼀个⾼级特性就是其具有⾃动伸缩的功能，当我们将width 设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right ⾃动伸缩其⼤⼩

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative; }
.left {
width: 200px;
height: 200px;
background-color: red; }
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0; 
right: 0; }

⽅法3：将左侧div进⾏绝对定位，然后右侧div设置margin-left: 200px

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative; }
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute; }
.right {
height: 200px;
background-color: blue;
margin-left: 200px; }

⽅法4：使⽤flex布局

.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row; }
.left {
width: 200px;
height: 200px;
background-color: red; }
.right {
height: 200px;
background-color: blue;
flex: 1; }

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-07-17，如有侵权请联系 cloudcommunity@tencent.com 删除

html