左側(cè)固定寬度，右側(cè)自適應(yīng)寬度的兩列布局實現(xiàn)
html結(jié)構(gòu)
<div class="outer">
<div class="left">固定寬度</div>
<div class="right">自適應(yīng)寬度</div>
</div>
在外層
div（類名為outer）的div中邓萨，有兩個子div地梨，類名分別為left和right，其中left為固定寬度缔恳，而right為自適應(yīng)寬度
方法1：左側(cè)div設(shè)置成浮動：float: left宝剖，右側(cè)div寬度會自拉升適應(yīng)
.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：對右側(cè):div進行絕對定位，然后再設(shè)置right=0褐耳，即可以實現(xiàn)寬度自適應(yīng)
絕對定位元素的第一個高級特性就是其具有自動伸縮的功能诈闺，當(dāng)我們將
width設(shè)置為auto的時候（或者不設(shè)置渴庆，默認為auto）铃芦，絕對定位元素會根據(jù)其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：將左側(cè)div進行絕對定位，然后右側(cè)div設(shè)置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;
}
