有了一列固定寬度作為基礎(chǔ)，二列固定寬度就非常簡單，我們知道div用于對某一個區(qū)域的標(biāo)識，而二列的布局，自然需要用到兩個div，XHTML代碼如下：

<div id="left">左列</div>
<div id="right">右列</div>

新的代碼結(jié)構(gòu)中使用了兩個id，分別為left和right，表示兩個div的名稱，我們所需要做的是，首先設(shè)置它們的寬度，然后讓兩個div在水平行中并排顯示，從而形成二列式的布局，CSS代碼如下：

left與right兩個div的代碼與前面類似，都使用相同寬高，本例中為了區(qū)分，左列和右列分別用了不同的邊框和背景色。而為了實現(xiàn)二列式布局，我們使用了一個全新的屬性——float。float屬性是CSS布局中非常重要的一個屬性，用于控制對象的浮動布局方式，我們的大部分div布局基本上都通過float的控制來實現(xiàn)布局，float的可選參數(shù)為：none/left/right。
float使用none值時表示對象不浮動，而使用left時，對象將向左浮動，例如本例中的div使用了float:left;之后，右側(cè)的內(nèi)容將流到當(dāng)前對象的右側(cè)。使用right時，對象將向右浮動，如果將#left的float值設(shè)置為right，將使得#left對象浮動到網(wǎng)頁右側(cè)，而#right對象則由于float:left;屬性浮動到網(wǎng)頁左側(cè)。
這樣，在動用了簡單的float屬性之后，二列固定寬度的而已就能夠完整的顯示出來。
具體操作步驟如下：
新建頁面，插入div可以參考：CSS網(wǎng)頁布局入門教程1：一列固定寬度
當(dāng)插入一個div后，接著插入第二個時，在插入div標(biāo)簽的插入會多出一個選項：在選定內(nèi)容旁換行，這樣插入就把這個div標(biāo)簽插入到了id為left的div之內(nèi)，這并不是本例所要的結(jié)果，所以我們選擇在標(biāo)簽之后，然后在右側(cè)激活的下拉列表中找到<div id="#left">，這樣我們插入的id為right的div就插入到了left的后邊。如下圖所示：
 

left的css設(shè)置如下：

 

right的設(shè)置只有與left的邊框和背景色不同而已，可以參照left的自行設(shè)置。
模板無憂原創(chuàng),轉(zhuǎn)載請保留出處.