你想設計兩欄式還是三欄式的網頁排版設計

無論是兩欄式網頁設計還是三欄式網頁設計，都是相當普遍的網頁排版設計方式，而這兩欄式或者是三欄式架構，若使用 DIV 區塊來排版，又該怎麼做呢？有個很重要的觀念，就是 CSS 的浮動效果，這個浮動效果簡單來說，可以看成是平面上的區塊，在水平方面上下與左右的關係。

以 DIV 區塊預設的排版來說，每個區塊都會佔用掉一整行的空間，換句話說每個區塊都無法在水平方向並排，如果我們要讓水平方向可以有多個 DIV 區塊並排，這種效果就必須採用 CSS 的浮動效果，CSS 的浮動效果可以使用 float 屬性來設計，以下我們寫一個簡單的範例，讓各位讀者朋友們參考看看，應該可以看出端倪。

<div style="float:left;width:200px;height:60px;background-color:green;">第一個區塊</div>
<div style="float:left;width:200px;height:60px;background-color:blue;">第二個區塊</div>

範例視覺效果

第一個區塊

第二個區塊

為了讓範例稍微簡化一點，這裡我們先寫兩個div區塊並排的效果，各位可以從範例中，看到兩個div區塊都使用了 float 屬性，也就是 css 的浮動效果，讓原本應該由上而下排列的兩個 div 區塊，變成左右各一個，呈現水平排列的視覺效果，利用這樣的排版方式，我們可以輕易的製作出兩欄式的網頁版面，同樣的概念也可以用來設計三欄式的網頁排版。

各位從範例中已經看到 DIV 區塊是可以透過浮動的功能，達成左右並排的結果，如果你想進一步了解到兩欄式和三欄式的網頁排版設計，可以參考以下兩個參考資料網頁的內容，有比較完整的語法分析以及範例可以看。

參考資料

1. CSS 學習筆記: 用 DIV 排版兩欄式網頁設計
2. CSS 學習筆記: 用 DIV 排版三欄式網頁設計