                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

自適應的情況問題？

我在這個時候使用一個主div，將這三個div包含，就是類似上節課的兩列布局。然后這個自適應就失效了。為什么呢？是因為我在主DIV里面設置了總寬度嗎？

Lynn_佳

2016-05-26

源自：如何用CSS進行網頁布局 4-1

關注問題我要回答

895

操作

收起

3 回答

Newbie_Zou 回答被采納 +3 積分
2016-05-26

要加上主div的話你可以把中間的div也設置成絕對塊，然后設置左右兩邊距離。如：

.main{width:1000px;}

.left{ width:200px; height:600px; background:#ccc;left:0; top:0;position:absolute;}

.middle{ height:600px; background:#9CF;position:absolute;right:310px;left:210px;}

.right{ height:600px; width:300px; position:absolute;right:0; top:0;background:#FCC;}

這樣就能自適應了。

0 回復有任何疑惑可以回復我~

收起回答

Lynn_佳提問者

非常感謝！

2016-05-27 回復有任何疑惑可以回復我~

種子_fe
2016-05-26

我試了一下，主div不設寬度效果還是一樣，設置總寬度以后就不對了，可能是因為設置了position：absolute以后元素會脫離正常文檔流，該元素的定位會相對于其第一個position不是static的父元素進行定位，如果你的主元素沒有設置position屬性，左右兩個div就相對于body絕對定位，你可以試試在主div里設置position：relative；margin：0 auto；應該就好了

0 回復有任何疑惑可以回復我~

收起回答