设置两栏自适应的方法
1. 浮动 + overflow: hidden
一侧固定宽度，然后浮动；另一侧设置
overflow: hidden
<style>
.div1 {
width: 100px;
height: 100px;
float: left;
background: red;
}
.div2 {
height: 500px;
overflow: hidden;
background: #ddd;
}
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
2. 浮动 + margin-left/margin-right
一侧固定宽度，然后浮动；另一侧设置
margin-left/margin-right=宽度
<style type="text/css">
div {
height: 200px;
}
.left {
float: left;
width: 100px;
background-color: rebeccapurple;
}
.right {
left: 200px;
background-color: red;
}
</style>
<body>
<div class="left">固定宽度</div>
<div class="right">设置margin-left=固定宽度</div>
</body>
3. flex 布局
父容器
display: flex;，一侧固定宽度，另一侧flex: 1;
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
width: 100px;
height: 200px;
}
.right{
background-color: red;
height: 200px;
flex: 1;
}
</style>
<body>
<div class="left">固定宽度</div>
<div class="right">flex: 1</div>
</body>