实现两栏布局：左侧定宽，右侧自适应
html：
<html>
<head>
</head>
<body>
<div class="container">
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</div>
</body>
</html>
最终效果图：
方案一、float+margin
.container {
width: 100%;
}
.left {
background: #2196f3;
width: 200px;
height: 100px;
float: left;
}
.right {
background: #ff9800;
height: 100px;
margin-left: 200px;
}
方案二、float+overflow:hidden
.container {
width: 100%;
}
.left {
background: #2196f3;
width: 200px;
height: 100px;
float: left;
}
.right {
background: #ff9800;
height: 100px;
overflow: hidden;
}
方案三、CSS3：float+calc
.container {
width: 100%;
}
.left {
background: #2196f3;
width: 200px;
height: 100px;
float: left;
}
.right {
background: #ff9800;
height: 100px;
float: left;
width: calc(100% - 200px);
}
方案四、flex布局
.container {
width: 100%;
display: flex;
}
.left {
background: #2196f3;
width: 200px;
height: 100px;
}
.right {
background: #ff9800;
height: 100px;
flex: 1;
}
![css实现两列布局，一列固定宽度，一列宽度自适应方法[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)