css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積矽步，無以至千裡。這一系列文章講述幾種css特殊布局的實現，也當作為自己做個備忘吧。
首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應
這個很好實現，左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。這樣基本就可以了。但為了相容IE還必須做些工作。
看下代碼結構：
效果為：
中間列要不要設定margin-left和margin-right ?
注意，中間那列需要把左右兩個外邊距分別設為左右兩列的寬度，否則會有些問題。如下：
在Google、Firefox等標準瀏覽器下是這樣的（包括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才行。如下：
最終的代碼
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>寬度調適型配置</title><style>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;}</style></head><body><div class="left">我是left</div><div class="right">我是right</div><div class="center">我是center</div></body></html>
兩列布局，一列寬度固定，另一列調適型配置也是這個道理的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
