.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來說，它類似于透明的空氣一般。
