1-1:我打算是这么写的，很不高级，尤其是右边，根据页面的变化，他会向左挤掉left；看慕课兄的代码如下：
.top{100%; height:50px;background:#ccc;}
.main{ 100%;/*1000px;*/ position:relative;height:300px;background:#f90;}
.foot{100%;height:100px;background-color:#DC143C;}
.left{200px;height:300px;background:#6495ED;position:absolute;}
第二种也有问题
2-2:为什么非要absolute呢?他是相对于body呀在这里,当main有定值时还通用吗?
2-3:实验证明是不可以的
2-4:既是他这中方法，也是让right盒子一直超出，还有水平滚动条。
.right{margin-left:210px;width:100%;height:300px;background:lightgreen;position:absolute;}
2-1:通过position:absolute和定值margin-left,这样width就可以设置成100%,进而成了响应式,不管窗口多大都不会挤掉left的效果*/
1-1:其实一开始的让右边自适应,我想到的是width100%,但是会把left覆盖住.我这就没想到margin-left呢!
第三种方法是可以
.left{width: 200px;height: 300px;background:#6495ED;position: absolute;left:0;top: 0;}
用left：0,top：0,固定left的位置。然后用right的margin-left把左边的位置给让出来
.right{height:300px;/*100%;*/background:lightgreen;margin-left: 210px;}
right不设置宽度，如果设置了宽度100%，就会出现水平条
第四种也可以
.main{100%;height:300px;background-color:red;}
.left{ 200px;height:300px;background-color:blue;float:left;}
.right{height:300px;background-color:green;position:absolute;left:210px;right:0px;}
方法是利用左侧浮动固定宽度,右侧通过绝对定位,
right不设置宽度，如果设置了宽度100%，就会出现水平条
总结
普遍就是通过position的相对，绝对定位，++top，right，left；的相互配合，或通过margin的移动，实现效果。这里foot处没有清除浮动。看上去没什么影响就不清楚了。
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>混合布局编程挑战</title> 6 <style type="text/css"> 7 /* 8 9 body{ margin:0; padding:0; font-size:30px; color:#fff} 10 .top{100%;background-color:#ccc;} 11 .main{100%;height:350px;overflow:hidden;background-color:#f90;} 12 .left{ 200px;height:inherit;background-color:#6495ED;float: left;} 13 .right{55%;height:inherit;float:right;background-color:lightgreen;} 14 .foot{100%;background-color:#DC143C;} 15 16 * 17 * 1-1:我打算是这么写的，很不高级，尤其是右边，根据页面的变化，他会向左挤掉left；看慕课兄的代码如下：*/ 18 .top{width:100%; height:50px;background:#ccc;} 19 20 .main{width: 100%;/*1000px;*/ position:relative;height:300px;background:#f90;} 21 .foot{width:100%;height:100px;background-color:#DC143C;} 22 /*.left{200px;height:300px;background:#6495ED;position:absolute;}*/ 23 24 /*第二种也有问题*/ 25 /*2-2:为什么非要absolute呢?他是相对于body呀在这里,当main有定值时还通用吗?*/ 26 /*2-3:实验证明是不可以的*/ 27 /*2-4:既是他这中方法，也是让right盒子一直超出，还有水平滚动条。*/ 28 /*.right{margin-left:210px;100%;height:300px;background:lightgreen;position:absolute;}*/ 29 /*2-1:通过position:absolute和定值margin-left,这样width就可以设置成100%,进而成了响应式,不管窗口多大都不会挤掉left的效果*/ 30 /*1-1:其实一开始的让右边自适应,我想到的是width100%,但是会把left覆盖住.我这就没想到margin-left呢!*/ 31 32 /*第三种方法是可以*/ 33 .left{width: 200px;height: 300px;background:#6495ED;position: absolute;left:0;top: 0;} 34 /*用left：0,top：0,固定left的位置。然后用right的margin-left把左边的位置给让出来*/ 35 .right{height:300px;/*100%;*/background:lightgreen;margin-left: 210px;} 36 /*right不设置宽度，如果设置了宽度100%，就会出现水平条*/ 37 38 39 /*第四种也可以*/ 40 /*.main{100%;height:300px;background-color:red;} 41 42 .left{ 200px;height:300px;background-color:blue;float:left;} 43 44 .right{height:300px;background-color:green;position:absolute;left:210px;right:0px;}*/ 45 /*方法是利用左侧浮动固定宽度,右侧通过绝对定位,*//*right不设置宽度，如果设置了宽度100%，就会出现水平条*/ 46 /* 47 总结 48 * 普遍就是通过position的相对，绝对定位，++top，right，left；的相互配合，或通过margin的移动，实现效果。这里foot处没有清除浮动。看上去没什么影响就不清楚了。 49 * 50 * */ 51 </style> 52 53 </head> 54 55 <body> 56 <div class="top">top</div> 57 <div class="main"> 58 <div class="right">right</div><!--实现右侧先加载--> 59 <div class="left">left</div> 60 </div> 61 <div class="foot">foot</div> 62 63 </body> 64 </html>