今天和大家分享的是，用css實(shí)現(xiàn)一個(gè)左側(cè)定寬，右側(cè)自適應(yīng)兩列布局，內(nèi)容如下，代碼可直接復(fù)制使用。希望對(duì)你有所幫助。
html代碼：
<div class="left">固定寬度區(qū)</div>
<div class="right">自適應(yīng)寬度區(qū)</div>
<div class="footer">底部區(qū)</div>
　　css代碼：
/*第一種方法(浮動(dòng))*/
 .left {
　float: left;
　width: 100px;
　height: 400px;
　background-color: blue;
}

.right {
　margin-left: 100px;
　height: 200px;
　background: green;
}

.footer {
　clear: both;
　background-color: yellow;
}
/*第二種方法（相對(duì)布局）*/
.left {
　position: absolute;
　top: 0;
　left: 0;
　width: 100px;
　height: 150px;
　background-color: blue;
}

.right {
　margin-left: 100px;
　height: 150px;
　background-color: green;
}

.footer {
　background-color: yellow;
}
/*第三種方法（flex）*/
.left {
　float: left;
　width: 100px;
　height: 150px;
　background-color: blue;
}

.right {
　display: flex;
　flex: 1;
　height: 150px;
　background-color: green;
}

.footer {
　background-color: yellow;
}
　　以上就是匯仁智杰分享的幾種方法，希望對(duì)您有所幫助，每天都會(huì)有內(nèi)容更新，請(qǐng)及時(shí)關(guān)注我們哦，如果說(shuō)您有什么不同的見(jiàn)解，請(qǐng)隨時(shí)聯(lián)系小編，我們一起探討學(xué)習(xí)。