運用CSS進行靈活的列布局

來源:互聯網
上載者:User

一、開篇

現在的網站的主體部分很多都採用了列布局,常見的情形如下:

 

在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似乎有些   多餘。但是總的來說,這種方法基本可以滿足一個網站的所有列布局需求,還是值得在實際中使用的。

三、樣本下載

      點此下載樣本

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.