|
|
工作原理
#wrapper必須觸發(fā)hasLayout,不然有時里面的內(nèi)容會浮得怪怪的，我直接用float的，可以用其他方式。其實如果只是要做到這個例子要的效果連#wrapper都可以不要。
#left定義100%寬度并利用margin:0 0 0 -200px把左邊整塊放在偏移入左邊200px處，再利用#innerLeft的margin:0 0 0 200px再把內(nèi)容撐出來，
#right只是簡單的浮動，#innerRight米多大作用，只是習(xí)慣性保留著，除了可以讓我們的控制更簡單點，還可以為下次改變布局可保持結(jié)構(gòu)不變。
除了可以固定右邊也可以固定左邊，有空的朋友可以嘗試一下
存在問題
- IE7以下版本的IE瀏覽器無min-width，拉太小會很難看。下篇文章再解決
擴(kuò)展功能
- 如果想左右兩列等高可以參考這個：解決列高度自適應(yīng)(列高度相同)的五種方法
- 也可以玩：固定中欄寬度, 左右兩欄寬度相等和自適應(yīng)
- 還可以擴(kuò)展這樣的功能：最小高度100%，頁腳保持在底部的布局方法
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
HTML/CSS技術(shù)：固定右欄寬度, 左欄內(nèi)容先出現(xiàn)同時自適應(yīng)寬度的布局，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
