Div css教程之三二列和三列布局分享

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

二列自適應寬度
二列固定寬度
二列固定寬度居中
xhtml的塊級元素(div)和內聯元素(span)
float屬性
三列自適應寬度
三列固定寬度
三列固定寬度居中
IE6的3像素bug
一、兩列自適應寬度
下面以常見的左列固定右列自適應為例，因為div為塊狀元素，默認情況下占據一行的空間，要想讓下面的div跑到右側，就需要做助css的浮動來實現。首先創建html代碼如下：

1. 此處顯示 id "side" 的內容
   
2. 此處顯示 id "main" 的內容

復制代碼

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

1. #side { background: #99FF99; height: 300px; width: 120px; float: left; }
   
2. #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

復制代碼



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



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

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