css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積矽步，無以至千里。這一系列文章講述幾種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才行。如下：
最終的**1 23
4567
891011
1213
1415
1617
1819
<html>
<head>
<metacharset="utf-8" />
<title>寬度自適應布局
<style>
body,div
div
.left
.right
.center
<body>
<divclass="left">我是left
<divclass="right">我是right
<divclass="center">我是center
兩列布局，一列寬度固定，另一列自適應布局也是這個道理的。
源引：
CSS布局奇淫技巧之 寬度自適應
css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積矽步，無以至千里。這一系列文章講述幾種css特殊布局的實現，也當作為自己做個備忘吧。首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應 這個很好實現，左右兩列分別左浮動和右浮動並給乙個固定寬度，中間不浮動，也不...
CSS布局奇淫技巧之 寬度自適應
css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積矽步，無以至千里。這一系列文章講述幾種css特殊布局的實現，也當作為自己做個備忘吧。首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應 這個很好實現，左右兩列分別左浮動和右浮動並給乙個固定寬度，中間不浮動，也不...
CSS布局奇淫技巧之 高度自適應
何為高度自適應？高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作選單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。布局思路 在ie7 及chrome firefox等瀏覽器中，高度自適應...