實作兩欄布局：左側定寬，右側自适應
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=)