今天和大家分享的是，用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;
}
　　以上就是汇仁智杰分享的几种方法，希望对您有所帮助，每天都会有内容更新，请及时关注我们哦，如果说您有什么不同的见解，请随时联系小编，我们一起探讨学习。