CSS布局之寬度自適應實現方法[轉載]

首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應

這個很好實現，左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。這樣基本就可以了。但為了兼容IE還必須做些工作。

看下代碼結構：

效果為：

中間列要不要設置margin-left和margin-right ?

注意，中間那列需要把左右兩個外邊距分別設為左右兩列的寬度，否則會有些問題。如下：

在穀歌、火狐等標準瀏覽器下是這樣的（包括IE8+）：

而在IE6、IE7中是這樣的（圖是在IE6下截的）

我們可以看到中間那列子元素的margin-left或margin-right的起點是不一致的，在IE6、IE7中，即使不給中間列設定margin-left和margin-right,它的子元素的左右外邊距的起點仍然是在左右兩列寬的的基礎上的，就像是有margin-left和margin-right一樣。所以為了各瀏覽器保持一致，中間那列還是設一個margin-left和margin-right為好。

IE6中的3px間隙bug

在上圖的ie6截圖中，我們看到各列之間有一條3px的間隔，這是隻有IE6才有的問題。

如果中間那列的margin-left和margin-right都為0的話，則隻要把左列的margin-right設為-3px,右列的margin-left設為-3px就行了。

但如果把中間列的margin-left和margin-right分別為左右兩列的寬度時（上麵已經說了，這也是必須這樣做的），即使把左列的margin-right設為-3px,右列的margin-left設為-3px也還是沒有效果。這時候還得把中間列的margin-left設為左列寬度-3px,margin-right設為右列寬度-3px才行。如下：

最終的代碼

兩列布局，一列寬度固定，另一列自適應布局也是這個道理的。