用position做三列布局的時候出現問題,請看下面具體的,求解答
各種測試發現,在用position做三列布局的時候,中間設置margin自適應寬度,左右兩邊固定寬度必須設置一樣的才會得到結果,
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
.left{width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0}
.main{height:600px;margin:0 210px 0 210px;background:#9CF}
.right{height:600px; width:200px; position:absolute; top:0;right:0;background:#FCC;}
如果兩邊固定寬度值不一樣的話,就會出現中間自適應部分與右邊布局重疊,而與左邊布局中間很大空白,求大神解答一下是什么情況,我是新手,勿噴
2016-08-03
我也是新手，給你分享一下我的看法。首先你要知道元素流入頁面的方式 是從上到下從左到右的順序，當你浮動或者絕對定位一個元素時 ，其實就是把元素從頁面流中拿出來放在一個位置上。.left和.right被定位在屏幕左右兩端 ，寬度為200px。這是他們已經被從頁面流中提取出來，你可以看做頁面流中只有.main，而根據瀏覽器的默認，.main會從左到右 從上到下的流入頁面，如果你不設置main的外邊距或者當你設置main的外邊距小于兩個絕對定位元素的寬度時，main會從瀏覽器的最左面一直擴展到瀏覽器的最右面，就會造成你說的main與兩側重疊。另外還有一點要說明，正常流入頁面中的塊元素中包含的內聯元素會包圍著被浮動或者被絕對定位的元素。 ** 說遠了，總的來說當你使用絕對定位或浮動元素時，一定要考慮正常流入頁面的元素的外邊距要大于或等于被浮動或定位元素的寬度。這樣就能解決你遇到的問題了。**
2016-08-24
我也出現了這個問題 請問是怎么回事啊 是HTML哪里出問題了啊
2016-08-03
這個CSS語句是沒有出現問題的，你是不是HTML編寫的時候出現問題了……
2016-08-03
我把你的復制過來，是沒有問題的，問題應該不在這里，應該是body的問題
2016-08-03
你是不是中間的寫錯了。如果你把.right{height:600px; width:300px; position:absolute; top:0;right:0;background:#FCC;}那么.main{height:600px;margin:0 310px 0 210px;background:#9CF}這里是順時針，你那樣的情況好像是把.main{height:600px;margin:0 210px 0 310px;background:#9CF}寫成這樣了