八種建立等高列布局

高度相等列在Web頁面設計中永遠是一個網頁設計師的需求。如果所有列都有相同的背景色，高度相等還是不相等都無關緊要，因為你只要在這些列的父元素中設定一個背景色就可以了。但是，如果一個或多個列需要單獨設定自己的背景色，那麼它的視覺完整性的設計就顯得非常重要了。大家都知道當初Table實現等高列布局是多麼的簡單，但是我們使用CSS來建立等高列布局並非是那麼容易的事情。

如果一個設計是固定寬度（非流體的寬度設計），那麼實現多列等高效果是相當的容易。最好的技術就是使用Dan Cederholm的Faux Columns技術。只要製作一張合適的背景圖片，在你多列的父元素中進行垂直鋪放，從而達到一種假像（假的多列等高布局效果）。但是在流體布局中要用CSS實現多列等高的設計那就不是那麼容易的事情，因為我們沒有辦法在使用背景圖片來實現多列等高的假像了，那麼是不是就沒有辦法實現了呢？那當然不是那麼回事了，不管是實現固定式配置還是流體布局的等多列等高視覺效果，方法還是蠻多的，這些方法體現了CSS的不同技術，也各有千秋，下面我們就一起來探討Web頁面中的多列等高的實現技術。

下面要介紹的方法都是讓我們的布局如何?多列的等高視覺效果，正如下圖所示：

一、假等高列

這種方法是我們實現等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像：

Html Markup

<div class=”container clearfix”><div class=”left”></div><div  class=”content”></div><div class=”right”></div></div>

在製作樣式之前需要一張類似下面的背景圖：

CSS Code:

.container {background: url("column.png") repeat-y;width: 960px;margin: 0 auto;}.left {float: left;width: 220px;}.content {float: left;width: 480px;}.right {float:left;width: 220px;}

優點：

實現方法簡單，相容性強，不需要太多的css樣式就可以輕鬆實現。

缺點：

使用這種方法不適合流體布局等高列的布局，另外如果你需要更換背景色或實現其他列數的等高列時，都需要重新製作過背景圖。

二、給容器div使用單獨的背景色（固定式配置）

這種方法實現有點複雜，如果你理解其實現過程也是相當的簡單。這種方法我們主要給每一列的背景設在單獨的<div>元素上。這種方法的實現的原則是：任何<div>元素的最大高度來撐大其他的<div>容器高度。如下圖所示：

上圖中，不管我們哪一列的高度最高，那麼其三個容器“rightBack,contentBack,leftBack”的高度相應會隨最高列的高列變化，下面我們一起來看其實現過程：

Html Markup

<div class="container"><div class="rightWrap"><div class="contentWrap"><div class="leftWrap"><div class="aside column leftSidebar" id="left"></div><div id="content" class="column section"></div><div class="aside rightSidebat column" id="right"></div></div></div></div></div>

CSS Code:

<style type="text/css">.container {width: 960px;margin: 0 auto;}.rightWrap {width: 100%;float: left;background: green;overflow: hidden;position: relative;}.contentWrap {float: left;background: orange;width: 100%;position: relative;right: 320px;/*此值等於rightSidebar的寬度*/}.leftWrap{width: 100%;background: lime;float:left;position: relative;right: 420px;/*此值等於Content的寬度*/}#left {float: left;width: 220px;overflow: hidden;position: relative;left: 740px;}#content {float: left;width: 420px;overflow: hidden;position:relative;left: 740px;}#right {float: left;overflow: hidden;width: 320px;position: #333;position: relative;left: 740px;}</style>

看起來蠻複雜吧？其實你只要瞭解了它是如何的工作原理就會變得非常簡單，你只要理解並掌握以下幾點：

1. “div.rightWrap”、“div.contentWrap”、“div.leftWrap”都是一個封閉的容器；而“div#left”、“div#content”、“div#right”就是我們所說的列，裡面放了內容；
2. 每一個容器對應一列的背景色（用來放置背景色或背景圖片）；此例對應的是：“div.rgithWrap”用來實現“div#right”列的背景色；“div.contentWrap”用來實現“div#content”列的背景色；“div.leftWrap”用來實現“div#left”列的背景色；
3. 除了最外面的容器（也就是對應的最左列容器）外，我都都對他們進行相對定位，並且設定其“right”值，此值並和相對應的列寬相等。此例中“div.contentWrap”對應的剛好是“div#right”的寬度；而“div.leftWrap”對應用的剛好是“div#content”的寬度；
4. 給每列進行左浮動，並設定其列寬
5. 給每一列設定相對定位，並進行“left”設定，而且“left”的值等於除第一列的所有列寬的和。此例中“left”的值等於“div#right”和“div#content”兩列的寬度之和，也就是320px+420=740px