左边宽度固定，右边自适应布局

左边宽度固定，右边自适应布局

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; 
}