为什么80%的码农都做不了架构师？>>>
0、要实现的布局的效果图是这样子的：
a）外边有个大的div背景为粉红色，包住里面的div，宽度自适应，高度根据里面两个div高度最大那个撑高；
b）里面左边是一个黄色的div，固定宽度；
c）里面右边是一个绿色的div，宽度自适应；
1、开始的思路是用float:left；后来发现绿色的div根本不可能布局在右边且宽度自适应；
2、后来的思路是让里面两个div都设置为绝对定位position:absolute;但发现这样脱离了文档里，外面粉红色的div高度就无法撑开了；
3、后来网上找到一种方法，先吊下你的胃口，一步一步实现：
a）先布局好三个div：
<!DOCTYPEhtml><html><head><styletype="text/css">body{margin:0;padding:0;text-align:center;}#content{background:#ffcccc;}#left{background:#ffffcc;height:400px;width:200px;}#right{background:#ccffcc;height:400px;width:100%;}</style></head><body><divid="content"><divid="left"></div><divid="right"></div></div></body></html>
b）是的，你会发现绿色的右div不在右边，那我就来把里面两个div都设置为float:left;
#left{background:#ffffcc;height:400px;width:200px;float:left;}#right{background:#ccffcc;height:400px;width:100%;float:left;}
c）悲剧，粉红的div宽度不能被撑开，后来想到用个清除浮动来解决，即是clear:both;在粉红的div里面的最后写上以下代码：
<divid="content"><divid="left">left</div><divid="right">right</div><divstyle="clear:both"></div></div>
d）好了，回来了，别当心，绿色的div还是在粉红色的div里面，不信可以给粉红的div设置以下border看下，然后给粉红的div设置padding-left:200px;
#content{background:#ffcccc;padding-left:200px;}
e）好了，绿色的div位置差不多搞定了，剩下就是把黄色的div往左移动回原位，用margin-left:-200px;
#left{background:#ffffcc;width:200px;height:200px;float:left;margin-left:-200px;}
f）随便让黄色的div或绿色的div高度变高点，看会不会撑开粉红色的div；
#left{background:#ffffcc;height:300px;width:200px;float:left;margin-left:-200px;}
4、搞定了，主要思路就是让外面大的div设置padding为左边固定宽度的div的宽度大小，再设置左边固定宽度的div的margin-left为负宽度即可；
