大家测试我的，字数超了，背景bgc代替。
.top{bgc:gray; width:80%; margin:0 auto;}
.main{bgc:red; width:80%; position:relative; margin: 0 auto;}
.right{bgc:green; height:300px; margin-left:210px;}
.left{bgc:blue; width:200px; height:300px; position:absolute; top:0; left:0; }
.foot{bgc:yellow; width:80%; margin:0 auto;}
.top{bgc:gray; width:80%; margin:0 auto;}
.main{bgc:red; width:80%; position:relative; margin: 0 auto;}
.right{bgc:green; height:300px; margin-left:210px;}
.left{bgc:blue; width:200px; height:300px; position:absolute; top:0; left:0; }
.foot{bgc:yellow; width:80%; margin:0 auto;}
最新回答 / T_xbo
4-1课程中，第一个布局是利用浮动，设置三个块级标签div宽度33.33%以达到自适应窗口的目的，此时，不存在遮挡问题。第二个布局，是利用绝对定位，将左右块级标签脱离文档流，定位在窗口左右两侧，由于这两块div.mian已经脱离了文档流，中间的div则自动上移，由于左右宽度固定，再设置 .main{margin:0 310px 0 210px;}则可以正常显示并自适应内容宽度。关于遮挡，是由于浏览器解析代码的时候是自上而下的，左侧代码在上面（先解析），右侧代码在下面（后解析），显示在窗口中后解析的层级高于...
2016-07-25
已采纳回答 / 鲁晶晶
<style type="text/css">body{ margin:0; padding:0; font-size:30px; color:#fff}.top{height:100px; background:#ccc;}.left{ width:200px;float:left; height:300px; background-color: #9CF}.right{margin-right:210px;background:#F90; width:100%;}.foot{height:...
2016-07-25
.top{width:100%; height:100px; background:#ccc;}
.main{width:100%; float:left; background:red;}
.left{width:33%; height:300px; background:blue; float:left;}
.right{width:66%; height:300px; background:green;float:right;}
.foot{width:100%; height:50px; background:orange; clear:both;}
.main{width:100%; float:left; background:red;}
.left{width:33%; height:300px; background:blue; float:left;}
.right{width:66%; height:300px; background:green;float:right;}
.foot{width:100%; height:50px; background:orange; clear:both;}
.top{height:40px;width:100%;background:#ccc;}
.main{height:400px;width:610px;background:red;}
.left{height:400px;width:200px;background:blue;display:inline;float:left;}
.right{height:400px;width:400px;background:#40EE40;display:inline;float:right;}
.foot{height:40px;width:100%;background:#FF6600;}
.main{height:400px;width:610px;background:red;}
.left{height:400px;width:200px;background:blue;display:inline;float:left;}
.right{height:400px;width:400px;background:#40EE40;display:inline;float:right;}
.foot{height:40px;width:100%;background:#FF6600;}
