还是这位的代码兼容性最好,全部用定位,用浮动多多少少有点问题。
.top{background:gray;height:60px;}
.main{background:red;height:400px;position:relative;}
.left{background:blue;position:absolute;left:0;top:0;width:200px;height:400px;}
.right{background:green;height:400px;margin-left: 210px;}
.foot{background:orange;height:60px;}
.top{background:gray;height:60px;}
.main{background:red;height:400px;position:relative;}
.left{background:blue;position:absolute;left:0;top:0;width:200px;height:400px;}
.right{background:green;height:400px;margin-left: 210px;}
.foot{background:orange;height:60px;}
已采纳回答 / 限量
浮动定位是可以的。把left和right的加载顺序改变一下就可以了。把 <div class="right">right</div> <div class="left">left</div>改成<div class="left">left</div> <div class="right">right</div>就行了。但是该题目做了具体要求,任务3:要求右侧(right)先加载,左侧(left...
2016-02-24
正确答案》》》
.top{height:100px;background:#ccc;}
.main{height:400px;background:red;}
.left{ width:200px;height:400px;background:blue;float:left;}
.right{height:400px;background:#8b8;width:100%;position:absolute;margin-left:210px;}
.foot{height:55px;background:#e52;}
.top{height:100px;background:#ccc;}
.main{height:400px;background:red;}
.left{ width:200px;height:400px;background:blue;float:left;}
.right{height:400px;background:#8b8;width:100%;position:absolute;margin-left:210px;}
.foot{height:55px;background:#e52;}
.top{height:100px;background:#ccc;margin:0 auto;}
.main{margin:0 auto;}
.main{height:800px;width:900px;background:red;}
.left{height:100%;width:200px;float:left;background:blue;}
.right{height:100%;width:690px;background:green;float:right;}
.foot{height:100px;background:#991;}
.main{margin:0 auto;}
.main{height:800px;width:900px;background:red;}
.left{height:100%;width:200px;float:left;background:blue;}
.right{height:100%;width:690px;background:green;float:right;}
.foot{height:100px;background:#991;}
宽度不能写死
.top{height:100px;background-color:#EEE;}
.main{height:500px;background-color:#ddf;position:relative;}
.left{width:200px;background-color:#112;position:absolute;left:0;top:0;height:100%;}
.right{margin-left:210px;background-color:#558;height:100%;}
.foot{height:50px;background-color:#991;}
.top{height:100px;background-color:#EEE;}
.main{height:500px;background-color:#ddf;position:relative;}
.left{width:200px;background-color:#112;position:absolute;left:0;top:0;height:100%;}
.right{margin-left:210px;background-color:#558;height:100%;}
.foot{height:50px;background-color:#991;}