三欄寬度自適應布局方法vs
頁面自適應布局也可稱為流動性布局，對於寬屏高解析度的顯示器仍然有很好的使用者體驗。這裡談談我對自適應布局的一些看法和總結，主要是針對三欄布局，實現的方法有三種：絕對定位法
，margin負值法
以及自身浮動法。
1、絕對定位法
實現的思路：左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離，並且寬度和margin值可為固定值或百分比。
html結構：
<div
id="left"
>
div>
<
div
id="main"
>
div>
<
div
id="right"
>
div>
css**：
html,body #left, #right #left #right #main
注：這裡的左中右三個div的順序是可以任意調整的。
此方法的優點：**量少，容易理解，不容易受內部元素影響而破壞布局。
缺點：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
2、margin負值法
實現思路：首先，中間的主體部分要使用雙層標籤。即外層div寬度100%顯示，並且浮動（本例左浮動），內層div為真正的主體內容，含有左右210畫素的margin值。左欄與右欄都是採用margin負值定位的，左欄左浮動，margin-left為-100%，由於前面的div寬度100%相對於瀏覽器，所以這裡的-100%margin值正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即200畫素。
html結構：
<div
id="main"
>
<
div class
="content"
>
div>
div>
<
div
id="left"
>
div>
<
div
id="right"
>
div>
css**：
html, body #main #main .content #left, #right #left #right
注：關於div的順序，無論是左浮動還是右浮動，先是主體部分div，這是肯定的，至於左右兩欄誰先誰後，都無所謂，在ie6，firefox，以及chrome瀏覽器下測試，表現都一致。
此方法的優點：三欄相互關聯，實現真正意義上的自適應，布局不易受內部影響。
缺點：相對比較難理解些，**相對複雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。
3、自身浮動法
此方法**最簡單。應用了標籤浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放後面，就實現了自適應。
html結構：
<div
id="left"
>
div>
<
div
id="right"
>
div>
<
div
id="main"
>
div>
css**：
html,body #main #left, #right #left #right
注：這裡三個div標籤的順序的關鍵是要把主體部分div放在最後，左右兩欄div順序可任意排列。
此方法的優點：**簡潔、高效。
缺點：中間主體部分不能使用clear:both屬性，否則主體部分會跳到左右邊欄的下面，結構就出現了錯亂。
三種三欄網頁寬度自適應布局方法
內容提要 在如今各個解析度顯示器n足鼎立的時期，頁面採用流動性布局 亦可稱自適應布局 不失為乙個好選擇。當然，具體實現不 是那麼容易，需要一定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個 絕對...
三種三欄網頁寬度自適應布局方法
1 絕對定位法 這或許是三種方法裡最直觀，最容易理解的 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。css 如下 為截圖 html 為 這裡的左中右三個div的順序是可以任意調整的，這與剩下的兩中方法就不一樣了，需要注意一下。此...
三欄網頁寬度自適應布局方法
一 絕對定位法 html片段如下 left main right css片段如下 html,body left,right left main right 思路 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。二 雙飛翼布局 main left right ...