还是这位的代码兼容性最好,全部用定位,用浮动多多少少有点问题。
.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;}
正确答案》》》
.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;}
.top{height:120px;background:gray;}
.main{height:600px;background:red;}
.left{height:600px;width:240px;background:blue;float:left;}
.right{height:600px;width:700px;background:green;float:right;}
.foot{height:60px;background:orange;}
#juzhong{width:960px;margin:0 auto;}
多设置了一个属性用来自动居中,然后用浮动来完成任务要求。
.main{height:600px;background:red;}
.left{height:600px;width:240px;background:blue;float:left;}
.right{height:600px;width:700px;background:green;float:right;}
.foot{height:60px;background:orange;}
#juzhong{width:960px;margin:0 auto;}
多设置了一个属性用来自动居中,然后用浮动来完成任务要求。