左侧固定宽度，右侧⾃适应宽度的两列布局实现
html结构
代码语言：javascript复制<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宽度会⾃拉升适应
代码语言：javascript复制.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，即可以实现宽度⾃适应
代码语言：javascript复制绝对定位元素的第⼀个⾼级特性就是其具有⾃动伸缩的功能，当我们将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
代码语言：javascript复制.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布局
代码语言：javascript复制.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; }
