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

這個(gè)很好實(shí)現(xiàn)，左右兩列分別左浮動(dòng)和右浮動(dòng)并給一個(gè)固定寬度，中間不浮動(dòng)，也不設(shè)定寬度。這樣基本就可以了。但為了兼容IE還必須做些工作

中間列要不要設(shè)置margin-left和margin-right ?

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

在谷歌、火狐等標(biāo)準(zhǔn)瀏覽器下是這樣的（包括IE8+）：

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

IE6中的3px間隙bug

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

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

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

最終的代碼

? ?body, div {

? ? ? ?margin:0;

? ? ? ?padding:0;

? ?}

? ?div {

? ? ? ?height:200px;

? ? ? ?color:#F00;

? ?}

? ?.left {

? ? ? ?float:left;

? ? ? ?width:100px;

? ? ? ?background:#00f;

? ? ? ?_margin-right:-3px;

? ?}

? ?.right {

? ? ? ?float:right;

? ? ? ?width:100px;

? ? ? ?background:#0f0;

? ? ? ?_margin-left:-3px;

? ?}

? ?.center {

? ? ? ?background:#333;

? ? ? ?margin:0 100px;

? ? ? ?_margin:0 97px;

? ?}

我是left

我是right

我是center

兩列布局，一列寬度固定，另一列自適應(yīng)布局也是這個(gè)道理的。