by zhangxinxu from
一、前言
在如今各個解析度顯示器n足鼎立的時期，頁面採用流動性布局（亦可稱自適應布局）不失為乙個好選擇。當然，具體實現不是那麼容易，需要一定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個：絕對定位法，margin負值法以及自身浮動法。這些方法簡潔實用，且無相容性問題。如果您想在您的頁面上使用流動性布局，相信本文給您一些啟示的。
二、三種方法
為了演示的需要，首先限定下示例的布局結構：左中右三欄布局，左右兩欄寬度固定（要想不固定將寬度值改為百分值即可），中間欄寬度自適應。左右兩欄的寬度為200畫素。
1、絕對定位法
這或許是三種方法裡最直觀，最容易理解的：左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。
您可以狠狠地點選這裡：絕對定位法演示demo
css**如下（為截圖）：
html**為（）：
這裡的左中右三個div的順序是可以任意調整的，這與剩下的兩中方法就不一樣了，需要注意一下。
此方法的優點是，理解容易，上手簡單，受內部元素影響而破壞布局的概率低，就是比較經得起折騰。
缺點在於：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。然而，一般情況下，除非使用者顯示器解析度寬度》=1600畫素，否則使用者不會把瀏覽器縮小到1000畫素以下的，所以該缺陷危害指數3.
2、margin負值法
這種方法是在實際的**中應用的最多的，我個人感覺多少有些跟風的嫌疑。此方法很難用一句話概括。首先，中間的主體要使用雙層標籤。外層div寬度100%顯示，並且浮動（本例左浮動，下面所述依次為基礎），內層div為真正的主體內容，含有左右210畫素的margin值。左欄與右欄都是採用margin負值定位的，左欄左浮動，margin-left為-100%，由於前面的div寬度100%與瀏覽器，所以這裡的-100%margin值正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即200畫素。
見下面的css**：
您可以狠狠地點選這裡：margin負值法演示demo
您需要注意幾個div的順序，無論是左浮動還是右浮動，先是主體部分div，這是肯定的，至於左右兩欄誰先誰後，都無所謂，我測試了ie6，firefox，以及chrome瀏覽器，表現一致。
此方法的優點：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，**相對複雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。
3、自身浮動法
此方法**最簡單。應用了標籤浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放後面，就實現了自適應。
您可以狠狠地點選這裡：自身浮動法演示demo
css**如下：
這裡三個div標籤的順序的關鍵是要把主體div放在最後，左右兩欄div順序任意。
此方法的優點是：**足夠簡潔與高效
不足在於：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
四、結語
table**可謂是自適應布局的利器，如今google的產品頁面，yahoo等自適應頁面都還是使用的table技術，原因在於table本身的自適應能力。然而，雖然它是google，它是yahoo，但是我依然很鄙視，您可以試試用firebug去看一下google頁面的html**，unbelievable！層級多的驚人，**真是多，臃腫！我過去覺得可能是某些功能之需，現在發現是追求技術，可擴充套件，自適應的副產物。我多次實踐，可以非常肯定的說：div完全可以取代table實現自適應布局。
本文提供的僅僅是我個人知道的幾種自適應方法，其實，我相信，肯定還有其他的方法，這就需要你我對其關注思考並發現了。
三種三欄網頁寬度自適應布局方法
內容提要 在如今各個解析度顯示器n足鼎立的時期，頁面採用流動性布局 亦可稱自適應布局 不失為乙個好選擇。當然，具體實現不 是那麼容易，需要一定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個 絕對...
三種三欄網頁寬度自適應布局方法
1 絕對定位法 這或許是三種方法裡最直觀，最容易理解的 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。css 如下 為截圖 html 為 這裡的左中右三個div的順序是可以任意調整的，這與剩下的兩中方法就不一樣了，需要注意一下。此...
三欄網頁寬度自適應布局方法
一 絕對定位法 html片段如下 left main right css片段如下 html,body left,right left main right 思路 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。二 雙飛翼布局 main left right ...