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