原文:css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
1.应用场景
左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应
2.思路
首先把这个问题分步解决，需要攻克以下两点：
1）让两个div并排到一行
2）让一个div宽度固定，另个div占据剩下宽度的空间
关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；
关于第二点，首先有一个宽度固定的div，另外自适应的div宽度是多少？首先这个宽度不能写“100%”，因为这里的100%是相对于第一个非静态祖先元素的，也就是说如果这样写，页面会出现整个页面宽度+左边固定列宽度的情形。那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。
3.实现
1）html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="task001.css">
<meta charset="utf-8">
</head>
<body>
<!-- 左侧固定列 -->
<div class="fixedColumn"></div>
<!-- 右侧自适应宽度列 -->
<div class="flexibleColumn"</div>
</body>
</html>
2）css
/*左固定列*/
.fixedColumn{
width: 40px;
height: 100%;
background-color: red;
float: left;
/*position: absolute;
left: 0;*/
}
/*右自适应列*/
.flexibleColumn{
height: 100%;
background-color: blue;
margin-left: 40px;
}
注：
1）fixedColumn 里注释的方法即绝对定位的实现方式，取消注释后把float那句注释掉，可以实现相同的效果
2）使用float需要注意清除浮动造成父元素塌陷的问题（这里不用清除，因为自适应列和固定列一样高，在标准流中可以撑起父元素）
4.小结
一定要自己实现试试，注意只有固定列脱离了文档流，自适应列还在文档流中！其他没什么要说的了，但是应该还有更好的方法，等我看到了一并总结过来~