.top{width:100%;height:100px;margin:0;background:#ccc;}
.main{width:100%;height:500px;background:red;}
.left{width:200px;height:500px;float:left;background:blue;}
.right{margin-left:210px;width:100%;height:500px;background:green;position:absolute}
.foot{width:100%;height:150px;background:#F90}
.main{width:100%;height:500px;background:red;}
.left{width:200px;height:500px;float:left;background:blue;}
.right{margin-left:210px;width:100%;height:500px;background:green;position:absolute}
.foot{width:100%;height:150px;background:#F90}
已采納回答 / qq_杜飛_03761348
他們設置 310 和210 是為了讓效果圖和案例一樣,中間div和兩邊有空白的間距。由于中間的div設置的margin 所以,它的距離是相對于body的距離,你疑問為啥不是和左右兩個div的距離,是因為,左右兩個div由于設置了absolute 脫離了文檔流,也就是相當于相對其他div來說,它類似于透明的空氣一般。
2017-12-01
最贊回答 / qq_冇_7
定義了width:100%,就相當于瀏覽器窗口的可視寬度,或者是已定義寬度的body的寬度。不定義寬度的話,塊級元素寬度會自適應。如果不再增加別的樣式,寬度也就相當于100%。在此基礎上,如果為塊級元素增加margin-left?和?margin-right,那么定義了width:100%的塊級元素寬度不變,仍就相當于瀏覽器窗口的可視寬度,或者是已定義寬度的body的寬度。而未定義寬度的塊級元素的寬度會在瀏覽器基可視寬度或者是已定義寬度的body的寬度礎上自動減去magin的值。
2017-12-01
.top{height:100px;background:#ccc;}
.main{background:#f00;height:600px;position:relative;overflow:hidden;}父元素定位,overflow隱藏超出的部分
.left{height:600px;width:200px;background:#00f}
.right{height:600px;width:100%;position:absolute;background:#9a9;margin-left:210px;}
.foot{height:100px;background:#aa0;}
.main{background:#f00;height:600px;position:relative;overflow:hidden;}父元素定位,overflow隱藏超出的部分
.left{height:600px;width:200px;background:#00f}
.right{height:600px;width:100%;position:absolute;background:#9a9;margin-left:210px;}
.foot{height:100px;background:#aa0;}
正確代碼:
.top{height:100px; background:#4e4e4e;}
.main{width:100%; height:600px;background:red;margin:0 auto;}
.left{ width:30%;height:600px;background:blue;float:left;}
.right{width:68%;height:600px;background:green;float:right;}
.foot{height:100px; background:#F63;}
.top{height:100px; background:#4e4e4e;}
.main{width:100%; height:600px;background:red;margin:0 auto;}
.left{ width:30%;height:600px;background:blue;float:left;}
.right{width:68%;height:600px;background:green;float:right;}
.foot{height:100px; background:#F63;}