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

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

.footer {
　clear: both;
　background-color: yellow;
}
/*第二種方法（相對布局）*/
.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;
}
　　以上就是匯仁智杰分享的幾種方法，希望對您有所幫助，每天都會有內容更新，請及時關注我們哦，如果說您有什么不同的見解，請隨時聯系小編，我們一起探討學習。