.top{height:200px;background:gray;}
.main{height:500px;background:red;width:100%;}
.left{ width:200px;height:500px;background:blue;position:absolute; left:0;}
.right{background:green;height:500px;position:absolute;margin-left:210px;width:100%;}
.foot{height:100px;background:orange;}
.main{height:500px;background:red;width:100%;}
.left{ width:200px;height:500px;background:blue;position:absolute; left:0;}
.right{background:green;height:500px;position:absolute;margin-left:210px;width:100%;}
.foot{height:100px;background:orange;}
最新回答 / 慕尼黑13322
因为文本main在<div class="main"里面独占一行,left用了绝对定位已经脱离了文本流，所以说文本main会被left挡住，然后right会在文本main的下面。
2020-04-19
*{
padding: 0;
margin: 0;
text-align: center;
}
.top,.foot{
height: 50px;
line-height: 50px;
background-color: cadetblue;
}
.left,.right{
height: 500px;
}
.right{
background-color: blueviolet;
}
.left{
width: 200px;
position: absolute;
top: 50px;
background-color: #FF7F50;
}
padding: 0;
margin: 0;
text-align: center;
}
.top,.foot{
height: 50px;
line-height: 50px;
background-color: cadetblue;
}
.left,.right{
height: 500px;
}
.right{
background-color: blueviolet;
}
.left{
width: 200px;
position: absolute;
top: 50px;
background-color: #FF7F50;
}
他们设置 310 和210 是为了让效果图和案例一样，中间div和两边有空白的间距。由于中间的div设置的margin 所以，它的距离是相对于body的距离，你疑问为啥不是和左右两个div的距离，是因为，左右两个div由于设置了absolute 脱离了文档流，也就是相当于相对其他div来说，它类似于透明的空气一般。
