狂賀！繼續閱讀功能推出啦！ - 部落格

您好，我是您所使用的繼續閱讀原作者

我嘗試停用所有的javascript(這是我的繼續閱讀所使用的核心)，您的版面仍然是亂的

所以可以推測應該不是我所造成的問題 :)

關於套用上繼續閱讀後相當常見的版面錯亂，我的見解是：

將樣板小裝置復原回預設值時，版面的結構可能有改變

目前我已經無法取得您原始的樣板，但我猜測您原本的版面應該是這樣

┌─────content ─┐┌────┐
│┌────────┐││sidebar │ 每個方框表示一個div
││　main-wraper 　│││　　　　│
││　　(主區塊)　　│││(邊欄)　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
││　　　　　　　　│││　　　　│
│└────────┘││　　　　│
└──────────┘└────┘
而您原始(目前)的CSS是：
#content { float: right; width: 650px;}
#main-wrapper {}
#sidebar { margin-top: 90px; float: left; width: 301px;}

但在小裝置恢復預設值之後，樣板結構變成目前的樣子：

┌────content ──┐
│┌────────┐│
││　main-wraper 　││
││　　(主區塊)　　││
││　　　　　　　　││
││┌────┐ ││
│││sidebar │　　││
│││(邊欄)　│　　││
│││　　　　│　　││
│││　　　　│　　││
│││　　　　│　　││
│││　　　　│　　││
│││　　　　│　　││
│││　　　　│　　││
││└────┘　　││
│└────────┘│
└──────────┘
所以您的sidebar自然就掉了下來，因為他再怎麼float left 也逃不出已經folat right的
contet

為了讓以後仍然可以放心恢復成預設值，在不變動樣板div結構的前提下

請將css作以下修改：

#container{ position:relative; } /*變動*/
#content { float: right; width: 650px; } /*不變*/
#main-wrapper {} /*不變*/
#sidebar { margin-top: 90px; position:absolute; left: 0px; top:0px; width:
301px;} /*變動*/

這樣sidebar就可以脫離conten的限制，外觀也接近原本的div樣式

我尚未找其他也遭遇跑板問題的網誌測試，不過希望這樣的CSS可以幫上大多數網誌的忙

m(_ _)m

--

http://blog.kengao.tw/

--