運用CSS進行靈活的列布局

一、開篇

在asp.net中，每個頁面重複的部分可以寫在masterpage中去（比如上圖中header、footer以及body的外框）。

那麼body裡面的列布局到底寫到masterpage裡面還是在每個頁面都寫一次呢？

在我看來有三種方式：

1、在masterpage中只寫body的外框，body裡面的列布局由每個頁面自己來寫，這種方法看起來很靈活（每個頁面的寬度都可以隨便定），但是對於以後的修改來說是非常不方便的；

2、把body中的列的布局方式寫到masterpage中去，這樣的話使用這個masterpage的列數以及列寬就已經被定死了。但是使用這個masterpage只能實現一種列布局，**看起來可能會單調；

3、如果要在乙個站點中實現多中列布局，那麼就將每種列寬布局各寫乙個masterpage，頁面想要哪種布局就是用哪個masterpage。但是每種masterpage也有公共的部分，這個可以再巢狀一層masterpage；

似乎剛才分析的最後這一種方法已經很好了，但是我認為這種方法必須得新增很多masterpage（每種列布局都需要乙個），這樣的話，某個頁面我想換一種列布局則會有些不方便；最理想的方法莫過於用乙個masterpage實現多種列布局了！我現在就來介紹一下這個方法。

二、方案

在masterpage的body中放置3個列（div），id分別為sideleft、main、sideright，分別代表左邊的列，中間的列和右邊的列。在這三個列的div內放置contentplaceholder，讓具體頁面來填充。master檔案中這部分的**如下：

在具體頁面裡，如果不想讓這一列顯示，則不要在頁面相應的

中寫內容，如果想讓這一列顯示，則在相應的

中首先新增一層div，而且需要設定此div的class為inner（其他名字也可）。關鍵的地方就在於設定css了，css如下

如果中沒有寫內容，則masterpage中這個列的div實際上為空，所以這一列就自動隱藏起來了。如果在左邊列的

中寫的有

，那麼#leftside .inner則會起作用，使得左邊立刻有了200px的寬度，右邊這一列的原理也一樣。中間這一列是在任何布局的情況下都必須有的（所以只需要一列布局的時候，就選這一列了），而且總是佔據了除了左邊列和右邊列（如果有的話）剩下的寬度。

注：#main中的高度如果不設定為1%，那麼在ie下就不能正確顯示。

這種方法的布局也有不足的地方，比如說布局的列最多只能有

3列；在某些情況下看來，

class

為inner

的這個div

似乎有些

多餘。但是總的來說，這種方法基本可以滿足乙個站點的所有列布局需求，還是值得在實際中使用的。