使用 CSS 建立固定寬度的布局

我最近的幾篇專欄文章討論了使用 xhtml 和 css 實現兩列或三列頁面布局的各個方面。到目前為止，所有例子都使用流式布局（也就是布局會自動擴充套件和適應瀏覽器視窗的寬度）。現在是時候考慮另外一種主要的頁面布局方法了，這種布局方法是固定寬度布局。

很多 web 構建人員傾向於使用固定寬度的布局進行頁面設計，因為它們能生成精確且可預知的結果。這種方法與列印布局非常接近，對於設計人員和訪問者來說都是乙個很重要的舒適因素；另外，對於包含很多大和其它元素的內容，由於它們在流式布局中不能很好地表現，因此固定寬度布局也是處理這種內容的最好方法。

從table 到 div

近年來，設計人員都使用表（table）來建立固定寬度的布局。表的列和行是對設計人員的布局**（grid）的一種可行的模擬，所以一點也不奇怪設計人員為什麼採用 html 表來完成頁面布局。

然而，基於表的布局有乙個明顯的問題。除了語義上不適合用表來進行布局之外，產生的**也很混亂，難於閱讀，甚至難於維護——尤其是在包含合併的表單元格（cell）和巢狀表時。

使用 div 進行頁面布局效果要好得多。除了這是推薦使用的最佳方法之外，**的裝載速度會更快，也更易於處理。

表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因為指定這些元素的尺寸相當簡單。其實通過 div 可以做到同樣的事情，只要確定 div 精確的維數並使用絕對和相對定位將這些 div 定位到頁面上即可。

圖 a 展示了乙個典型的固定寬度的布局，該布局由頂部的乙個標題，乙個三列內容的區域（主內容列，每側有乙個工具條），和頁面底部的乙個頁尾所組成。所有元素的寬度都是固定的；在瀏覽器視窗發布變化時它們的尺寸都不會變化。

下面的 xhtml 標記生成圖 a 所示的頁面。（出於簡單考慮，內容被截短。）

以下是引用片段：

that looks on tempests ... his height be taken.

but bears it out ... alteration finds.

whose worth's unknown, ... the remover to remove.

or bends with ... height be taken.

下面是將頁面設計為固定寬度布局的 css **。

以下是引用片段：

body

h2,h3

div#head

div#columns

div#side1

div#content

div#side2

div#foot

分解**

這段標記並不是特別地值得注意——只是在每個主要頁面元素的外面（標題、頁尾、工具條和主內容）包圍著 div。每個 div 有乙個 id，相應的 css 樣式可以使用這個 id 引用它。只有乙個額外的 div（div id="columns"）包圍著三列內容區域。在 internet explorer 中將頁尾放在三列中最長一列的下面是必要的。

像平時用法一樣，css **完成所有的重要任務。首先它完成一些家務管理。body樣式將頁面的邊距設為零，h2, h3樣式將預設間距設為零。否則的話，這該布局周圍就會有乙個邊距，而在某些瀏覽器（比如 netscape 和 mozilla）中標題將會在在主內容和頁尾的上面產生乙個空白區域。

樣式div#head為標題 div 設定乙個明確的高度和寬度。標題使用 position: absolute, top: 0px和 left: 0px規則顯式地定位在頁面的左上角。規則 position: absolute是非常重要的，因為定位屬性（top、left、right、bottom）在常規（靜態）定位時會被忽略。然而要記住，任何絕對定位的元素都會從常規的頁面流中被移除掉，而屬於頁面流的元素將會像絕對定位元素不存在一樣被定位到頁面上。

樣式 div#columns控制 div 的格式，使其充當三個列的容器。它使用 position: relative建立屬於常規頁面流的乙個元素（它會根據其內容進行擴充套件和適應，因而影響其它元素的定位），但是它將從其常規位置偏移。規則 top: 100px提供乙個偏移量，將列容器向下推，使其覆蓋標題。

規則 div#side1控制第乙個工具條列的樣式。它設定該列的寬度（width: 150px）並使用絕對定位將該列放置在其父元素的左上角。父元素是該列的 div，如果該元素使用相對於 body 元素的相對定位，那麼它將解釋 top: 0px規則而非你所期望的 100px設定。規則 div#side2以同樣的方式設定左工具條所用的列。div#side1和 div#side2唯一不同之處是背景色和 left: 600px規則，後者將該列定位在其它兩列的右邊。

樣式 div#content中的主內容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設計寬度（width: 450px）並使用 left: 150px和 top: 0px規則在其父元素（包圍著三個列的 div）內定位該列。主要的不同之處在於 position: relative規則。我們使用相對定位使主內容列可以影響其父元素（包圍著三個列的 div）的尺寸並因此影響頁尾元素的尺寸。

樣式 div#foot設定頁尾的寬度（width: 750px），該樣式還包含乙個 clear: both規則，該規則保證它接在其它元素下面，而不是旁邊。由於它使用相對定位，所以它在頁面上的位置是由其它元素的流所決定的，在這裡具體是由包圍著三個列的 div 所決定的。規則 margin-top: 100px是乙個很重要的細節，它防止頁尾被上面的列所覆蓋。這些列在頁面流中從它們的常規位置偏移，從而為絕對定位的標題以及需要相應偏移的頁尾騰出空間。

居中樣式的變化

使用 CSS 建立固定寬度的布局

使用CSS建立固定寬度的布局

左側固定寬度，右側自適應寬度的CSS布局

CSS布局中左（右）寬度自適應，右（左）寬度固定

使用 CSS 建立固定寬度的布局

使用CSS建立固定寬度的布局

左側固定寬度，右側自適應寬度的CSS布局

CSS布局中左（右）寬度自適應，右（左）寬度固定

相關推薦