三種三欄網頁寬度自適應佈局方法

1、前言
在現在各個分辨率顯示器N足鼎立的時期，頁面採用流動性佈局（亦可稱自適應佈局）不失爲一個好選擇。固然，具體實現不是那麼容易，須要必定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前爲止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個：絕對定位法，margin負值法以及自身浮動法。這些方法簡潔實用，且無兼容性問題。若是您想在您的頁面上使用流動性佈局，相信本文給您一些啓示的。

2、三種方法
爲了演示的須要，首先限定下示例的佈局結構：左中右三欄佈局，左右兩欄寬度固定（要想不固定將寬度值改成百分值便可），中間欄寬度自適應。左右兩欄的寬度爲200像素。

一、絕對定位法
這或許是三種方法裏最直觀，最容易理解的：左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。因而實現了三欄自適應佈局。

這裏的左中右三個div的順序是能夠任意調整的，這與剩下的兩中方法就不同了，須要注意一下。

此方法的優勢是，理解容易，上手簡單，受內部元素影響而破壞佈局的機率低，就是比較經得起折騰。
缺點在於：若是中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到必定程度，會發生層重疊的狀況。然而，通常狀況下，除非用戶顯示器分辨率寬度>=1600像素，不然用戶不會把瀏覽器縮小到1000像素如下的，因此該缺陷危害指數3.

二、margin負值法
這種方法是在實際的網站中應用的最多的，我我的感受多少有些跟風的嫌疑。此方法很難用一句話歸納。首先，中間的主體要使用雙層標籤。外層div寬度100%顯示，而且浮動（本例左浮動，下面所述依次爲基礎），內層div爲真正的主體內容，含有左右210像素的margin值。左欄與右欄都是採用margin負值定位的，左欄左浮動，margin-left爲-100%，因爲前面的div寬度100%與瀏覽器，因此這裏的-100%margin值正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小爲其自己的寬度即200像素。

您須要注意幾個div的順序，不管是左浮動仍是右浮動，先是主體部分div，這是確定的，至於左右兩欄誰先誰後，都無所謂，我測試了IE6，Firefox，以及chrome瀏覽器，表現一致。

此方法的優勢：三欄相互關聯，可謂真正意義上的自適應，有必定的抗性——佈局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，代碼相對複雜。出現百分比寬度，過多的負值定位，若是出現佈局的bug，排查不易。

三、自身浮動法
此方法代碼最簡單。應用了標籤浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放後面，就實現了自適應。

這裏三個div標籤的順序的關鍵是要把主體div放在最後，左右兩欄div順序任意。

此方法的優勢是：代碼足夠簡潔與高效
不足在於：中間主體存在剋星，clear:both屬性。若是要使用此方法，需避免明顯的clear樣式。

4、這裏再說明一個上下固定，中間自適應撐起整個頁面，其實也是用position:absolute

 

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=370