.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;}
2020-06-01
最新回答 / 慕尼黑13322
因?yàn)槲谋緈ain在<div class="main"里面獨(dú)占一行,left用了絕對(duì)定位已經(jīng)脫離了文本流，所以說文本main會(huì)被left擋住，然后right會(huì)在文本main的下面。
2020-04-19
最新回答 / 柒月君
去掉height的屬性，給個(gè)寬度就會(huì)自適應(yīng).main{ weight:300px; background:#FCC;margin:0 auto;}
2020-04-13
最新回答 / 慕碼人0448675
相對(duì)定位的盒子不脫離標(biāo)準(zhǔn)流，又因?yàn)閙iddle盒子是塊級(jí)元素，所以同為塊級(jí)元素的right會(huì)被擠下來。
2020-04-11
*{
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;
}
2020-04-01
他們?cè)O(shè)置 310 和210 是為了讓效果圖和案例一樣，中間div和兩邊有空白的間距。由于中間的div設(shè)置的margin 所以，它的距離是相對(duì)于body的距離，你疑問為啥不是和左右兩個(gè)div的距離，是因?yàn)?，左右兩個(gè)div由于設(shè)置了absolute 脫離了文檔流，也就是相當(dāng)于相對(duì)其他div來說，它類似于透明的空氣一般。
2020-03-15
.top{background:#ccc;}
.main{background:red; height:600px;}
.left{ width:30%;height:100%; float:left; background:blue;}
.right{width:60%;height:100%; float:right;background:black;}
.foot{background:orange;}
.main{background:red; height:600px;}
.left{ width:30%;height:100%; float:left; background:blue;}
.right{width:60%;height:100%; float:right;background:black;}
.foot{background:orange;}
2020-03-01