已采纳回答 / 慕沐9651679
你的right部分 position:absolute 只有设置了top：0,未定义left 和right，则默认值为auto。如果left或right的值为auto，则元素的顶端或者左边（从左往右读）要相对于其未定位前本来的顶端或左边对齐。
2016-11-19
已采纳回答 / 慕勒6241362
看看这个有没有帮助http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
2016-11-19
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:#9CF;}
.main{height:600px;background:red;}
.left{width:200px; height:600px;background:blue;float:left;}
.right{height:600px;background:green;float:right;}
.foot{height:50px;background:yellow;}
定位用float也没问题吧
.top{height:100px;background:#9CF;}
.main{height:600px;background:red;}
.left{width:200px; height:600px;background:blue;float:left;}
.right{height:600px;background:green;float:right;}
.foot{height:50px;background:yellow;}
定位用float也没问题吧
.main{width:960px;height:600px;margin:0 auto;background:#9FC;}
.top{height:100px;width:;background:gray;}
.main{height:400px;background:red;position:relative;}
.left{height:400px;width:200px;background:pink; }
.right{height:400px;width:100%;background:green;position:absolute;top:0;left:210px;}
.foot{height:50px;background:black;}
.main{height:400px;background:red;position:relative;}
.left{height:400px;width:200px;background:pink; }
.right{height:400px;width:100%;background:green;position:absolute;top:0;left:210px;}
.foot{height:50px;background:black;}
要求右侧（right）先加载，左侧（left）后加载: <div class="right">right</div>在
<div class="left">left</div>前面就可以实现了，不需要多加修改
<div class="left">left</div>前面就可以实现了，不需要多加修改
.top{margin:0 auto;background-color:gray;}
.main{position:relative;height:800px;background-color:red;}
.left{ width:200px;position:absolute;left:0;top:0;height:800px;background-color:blue;}
.right{float:right;height:800px;background-color:green;}
.foot{margin: 0 auto;background-color:orange;}
.main{position:relative;height:800px;background-color:red;}
.left{ width:200px;position:absolute;left:0;top:0;height:800px;background-color:blue;}
.right{float:right;height:800px;background-color:green;}
.foot{margin: 0 auto;background-color:orange;}
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】margin:0 auto}
.head{ width:100%; height:100px; background:#ccc;margin:0 auto}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
【任务1】莫名其妙
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】margin:0 auto}
.head{ width:100%; height:100px; background:#ccc;margin:0 auto}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
【任务1】莫名其妙
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{line-height:50px;}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:290px; height:590px; background:#ccc;float:left;}/
.right{ width:650px; height:590px; background:#FCC;float:right;position:relative;
right:10px;}
div{line-height:50px;}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:290px; height:590px; background:#ccc;float:left;}/
.right{ width:650px; height:590px; background:#FCC;float:right;position:relative;
right:10px;}