運用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檔案中這部分的代碼如下：

 

在具體頁面裡，如果不想讓這一列顯示，則不要在頁面相應的<asp:Content/>中寫內容，如果想讓這一列顯示，則在相應的<asp:Content/>中首先添加一層div，而且需要設定此div的class為inner（其他名字也可）。關鍵的地方就在於設定css了，css如下

     

如果<asp:Content/>中沒有寫內容，則MasterPage中這個列的div實際上為空白，所以這一列就自動隱藏起來了。如果在左邊列的<asp:Content/>中寫的有<div class=”inner”></div>，那麼#leftSide .inner則會起作用，使得左邊立刻有了200px的寬度，右邊這一列的原理也一樣。中間這一列是在任何布局的情況下都必須有的（所以只需要一列布局的時候，就選這一列了），而且總是佔據了除了左邊列和右邊列（如果有的話）剩下的寬度。

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

     這種方法的布局也有不足的地方，比如說布局的列最多隻能有3列；在某些情況下看來，class為inner的這個div似乎有些   多餘。但是總的來說，這種方法基本可以滿足一個網站的所有列布局需求，還是值得在實際中使用的。

三、樣本下載

      點此下載樣本