要实现左边固定，右边自适应有好几种方法，flex，calc，float，下面我来分析一下每种方法各自的特点级缺陷。
1. flex
用flex可以实现两个div，一个左固定，一个右自适应。思路就是在要处理的div的父级div里添加display:flex属性，然后将左边的div设置固定的宽度，右边的div直接将width设置为100%，将容器撑满即可。代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> div { height: 200px; } .flex-container {
//设置父级div的display属性为flex
display: flex; width: 100%; } .div-green {
//设置左边div的宽度也定宽
background-color: green; width: 220px; } .div-red {
//右边的div将容器撑满
background-color: red; width: 100%; } </style> </head> <body> <div class="flex-container"> <div class="div-green">div1</div> <div class="div-red">div2</div> </div> </body> </html>
2. calc + inline
要想左定宽，右自适应，其实其中很纠结的点就是，怎么计算右边div的width，怎么在容器宽度不断变化的时候，计算出来右边div的宽度。calc就提供了计算的方法。
假设左边div的220px; 则右边div的宽度 calc(100% - 220px),因为百分比对应的值是可以根据容器大小变化而变化的，但是百分比是不会变的，所以用100% - 220px，就可以计算出来右边div的宽度。calc有个注意点就是 100% - 220px之间有空格，没有空格calc是不会有效果的。
还有个问题是一般div ，display:block, 这样div是默认占一行的，需要将它们的父级div的display属性设置为 inline-flex;
实现代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> div { height: 200px; } .container { width: 100%; max-width: 1280px; display: inline-flex; } .div-green { background-color: green; width: 220px; } .div-red { background-color: red; width: calc(100% - 220px); } </style> </head> <body> <div class="container"> <div class="div-green">div1</div> <div class="div-red">div2</div> </div> </body> </html>
calc虽然很好用，但是还是有一些兼容性问题：IE9+、FF4.0+、Chrome19+、Safari6+，能兼容这些浏览器，但是移动端的浏览器还没支持，仅有“firefox for android 14.0”支持，其他的全军覆没。
3.float
float有两种方法，一种是直接用float，一种是用float+负边距
（1）float
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> div { height: 200px; } .div-green { //设置左边的div为float:left,并且定宽 background-color: green; width: 220px; float: left; } .div-red { //需要设置margin-left,因为float使得左边的div脱离文档流,所以右边的div会占据左边的位置,可以去掉margin-left试试 background-color: red; margin-left: 220px; } </style> </head> <body> <div class="div-green">div1</div> <div class="div-red">div2</div> </body> </html>
（2）float+负边距
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> div { height: 200px; } .div-green { background-color: green; width: 220px; float: left; margin-right: -100%; // >220px即可 } .container { float: left; width: 100%; } .div-red { background-color: red; margin-left: 220px; } </style> </head> <body> <div class="div-green">div1</div> <div class="container"> <div class="div-red">div2</div> </div> </body> </html>
float方法基本没有浏览器兼容性问题，可以很好的适用各种浏览器。
以上三种方法，是我总结的可以实现左边固定，右边自适应的方法，可以还有写的不是很正确的地方，欢迎指出~