<div class= "container">
???<div class="left"></div>
???<div class="right"></div>
</div>
<style>
/*方法一： BFC(块级格式化上下文)*/
???.container{
???????width:1000px;height:400px;border: 1px solid red;
???}
???.left{
???????width:200px;height:100%;background: gray;
???????float: left;
???}
???.right{
???????overflow:hidden; ?/* 触发bfc */
???????background: green;
???}
/*方法二： flex布局 */
???.container{
???????width:1000px;height:400px;border:1px solid red;
???????display:flex; ????????/*flex布局*/
???}
???.left{
???????width:200px; height:100%;background:gray;
???????flex:none;
???}
???.right{
???????height:100%;background:green;
???????flex:1; ???????/*flex布局*/
???}
/* 方法三： table布局 */
???.container{
???????width:1000px;height:400px;border:1px solid red;
???????display:table; ????????/*table布局*/
???}
???.left{
???????width:200px; height:100%;background:gray;
???????display:table-cell;
???}
???.right{
???????height:100%;background:green;
???????display: table-cell;
???}
/*方法四： css计算宽度calc*/
???.container{
???????width:1000px;height:400px;border:1px solid red;
???}
???.left{
???????width:200px;height:100%;background:gray;
???????float:left;
???}
???.right{
???????height:100%;background:green;
???????float:right;
???????width:calc(100% - 200px);
???}
/*方法五： margin-left方式*/
.container{
width:1000px;height:400px;border:1px solid red;
}
.left{
float:left;width:200px;border:1px solid red;height:100%;background:gray;
}
.right{
height:100%;border:1px solid blue;width:auto;margin-left:200px;
}
</style>
css-两个div并排，左边div宽固定，右边自适应 的解决方法
原文地址：https://www.cnblogs.com/juneling/p/9031374.html