八種創建等高列布局

高度相等列在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

用兩幅圖來展示其實現的過程：

下圖是實現上面的第二步對應的示例圖，也就是容器“div.rightWrap”，“div.contentWrap”，“div.leftWrap”進行相對定位（position: releative）,並展示了如何設置對應的“right”值。

上圖虛線代表的范圍是可視范圍，其中有兩列背景將會溢出，解決這個只需要在最外層容器“div.rightWrap”加上“overflow:hidden”就可以進行隱藏溢出的其他背景色。接下來下圖所展示的是上面所說的第五步：

前面我們對三個內容元素都進行了相對定位，現在只需要按第五步將其定位回去，如上圖所示。其實說到最後，你只要理解了這兩幅，你就什麼都清楚了。

優點：

這種方法是不需要借助其他東西（javascript,背景圖等）,而是純CSS和HTML實現的等高列布局，並且能兼容所有浏覽器（包括IE6），並且可以很容易創建任意列數。

缺點：

這種方法不像其他方法一樣簡單明了，給你理解會帶來一定難度，但是只要你理解清楚了，將能幫你創建任意列數的等高布局效果。

三、給容器div使用單獨的背景色（流體布局）

這種布局可以說是就是第二種布局方法，只是這裡是一種多列的流體等高列的布局方法。前面也說過了，其實現原理就是給每一列添加相對應用的容器，並進行相互嵌套，並在每個容器中設置背景色。這裡需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那麼你就需要使用三個容器。如下圖所示：

HTML Markup

								<div id="container3">
									<div id="container2">
											<div id="containe