二列和三列布局-Web標準(div+css)教程

　　今天學習《十天學會web標準(div+css)》的二列和三列布局，將涉及到以下內容和知識點

　　一、二列自適應寬度

　　二、二列固定寬度

　　三、二列固定寬度居中

　　四、xhtml的塊級元素(div)和內聯元素(span)

　　五、float屬性

　　六、三列自適應寬度

　　七、三列固定寬度

　　八、三列固定寬度居中

　　九、IE6的3像素bug

　　一、兩列自適應寬度

　　下面以常見的左列固定右列自適應為例，因為div為塊狀元素，默認情況下占據一行的空間，要想讓下面的div跑到右側，就需要做助css的浮動來實現。首先創建html代碼如下：

　　<div id="side">此處顯示 id "side" 的內容</div>

　　<div id="main">此處顯示 id "main" 的內容</div>

　　按照如圖所示的創建方法，把兩個div都創建出來，或手工寫出代碼。div創建完成后，開始創建css樣式表，代碼如下：

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

　　先創建#side的樣式，為了便于查看，設置了背景色。注意，side的浮動設置為向左浮動；

　　然后創建#main樣式，注意這里設置#main的左邊距為120px。預覽結果如下：

　　當我們拖動瀏覽器窗口變大變小時，#main的寬度也會跟著改變。這里設置margin-left:120px;正好讓出#side占去的120px寬度，如果這里設置為122px的話，中間將出現2px的空隙，大家可以試一下。

　　代碼原文：

　　二、兩列固定寬度

　　有了前面的基礎，兩列固定固定寬度就容易多了，只需要把#main的寬度由百分比改為固定值，如下圖：

　　三、兩列固定寬度居中

　　兩列固定寬度居中，需要在兩列固定寬度的基礎上改進，在學一列固定寬度居中時，我們知道讓它居中的方法，所以這里需要在這兩個div之外再加一個父div：

　　<div id="content">

　　<div id="side">此處顯示 id "side" 的內容</div>

　　<div id="main">此處顯示 id "main" 的內容</div>

　　</div>

　　操作方法：在源代碼里選中這兩個div的代碼后，點擊工具欄上插入div按鈕，填寫id后確定，得到如上的代碼

　　下面就需要設置#content的樣式了，我們知道，#side的寬度為120px，#main寬度為350px，那么#content的寬度應該為這兩者之和，然后設置#content居中，那么整體就居中了：