两栏布局
1使用浮动float(div1:宽200高200左浮动,div2:宽不管高200左外边距200)
<style>
*{margin:0;padding:0;}
.wrap{overflow:hidden;border:1px solid red;}
.left{float:left;width:200px;height:200px;background:purple;}
.right{margin-left:200px;background:green;height:200px;}
</style>
<div class="wrap">
<div class="left">左侧固定内容</div>
<div class="right">右侧内容自适应</div>
</div>
2使用绝对定位absolute(div1:宽200高200左绝对定位,div2:宽不管高200左外边距200)
<style>
*{margin:0;padding:0;}
.wrap{overflow:hidden;position: relative;}
.left{position: absolute; left: 0;top: 0;width: 200px; height: 200px;background: purple;}
.right{margin-left:200px;background:green;height:200px;}
</style>
<div class="wrap">
<div class="left">左侧固定内容</div>
<div class="right">右侧内容自适应</div>
</div>
3使用弹性布局flex(div1:宽200高200,div2:高200左外边距200)
等等
------------------
| | |
| | |
| 固定 | 自适应区域 |
| | |
| | |
--------------------