css实现两列自适应布局是css布局了比较常见到的，有负边距做法等，本文就主要说的是下面2中方法。

1、display:table-cell

左边使用float，右边使用display:table-cell

代码： 

.box{width:auto; height:auto; overflow:hidden; background:#f5f5f5; padding:20px}
.box a{ margin-right:15px; float:left}
.box .content{ display:table-cell; *display:inline-block;}
.box .content1{ overflow:hidden;}
html: 
<div class="box">
	<a href="#">左边固定</a>
	<div class="content">
		<p>每个人都有无法忘记的人，思念会像细沙穿过你的灵魂，轻轻开了们，只有风雨声每个人都有无法忘记的人，思念会像细沙穿过你的灵魂，轻轻开了们，只有风雨声</p>
	</div>
</div>
效果：
左边固定

每个人都有无法忘记的人，思念会像细沙穿过你的灵魂，轻轻开了们，只有风雨声每个人都有无法忘记的人，思念会像细沙穿过你的灵魂，轻轻开了们，只有风雨声

2、overflow:hidden
左边使用float，右边使用overflow:hidden
代码就不贴上来了。。


3、absolute定位

  左右两边都作用绝对定位，需注意的是，右边自适应width:100%, 那么就需要设置body{overflow: hidden}具体代码如下： 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<style type="text/css">
		*{margin:0; padding:0;}
	    body{overflow: hidden;}
	    div{position:absolute; height:100%;}
	    .box1{width:200px; background: #f60;}
	    .box2{left:200px; width:100%; background: #39cc39;}
	</style>
</head>
<body>
   <div class="box1">左边固定</div>
   <div class="box2">右边宽度自适应</div>
</body>
</html>



采用css负边距原理实现两列自适应布局