談談css左右等高的幾個方法

等高布局的使用情境有很多，很多時候為了滿足某列的背景或者邊框跟外框高度一樣，並且不受其他列動態變化高度的影響。一般我會考慮幾種方式:

一、負margin實現

代碼如下

複製代碼

.row-wrap { overflow: hidden; } .row1, .row2, .row3 { padding: 10px; margin-bottom: -1000px; padding-bottom: 1000px; } .row1{ width: 120px; background: #F2F2F2; float: left; } .row2{ width: 300px; background: #81C0F2; color: #FFF; float: left; _margin-right: -6px; //fix ie6 } .row3{ width: 150px; background: #FF6600; color: #FFF; overflow: hidden; zoom: 1; //觸發haslayout } <div class="row-wrap"> <div class="row1"> <p>雪梨洲際...</p> </div> <div class="row2"> <p>酒店離雪梨海濱...</p> </div> <div class="row3"> <p>在砂岩商場...</p> </div> </div>

 

這也是負margin的一個應用。這種方法是有一個缺點，就是當其中有出現錨點的時候，會出現錨點跳轉錯位的問題。
二、display:table-cell實現

代碼如下

複製代碼

.demo { width: 600px; } .cell-wrap { display:table-row; overflow:hidden; } .cell { display:table-cell; width:30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#81C0F2; *float:left; } .cell-center{ background: #FF6600; color: #FFF; } <div class="demo"> <div class="cell-wrap"> <div class="cell"> ... </div> <div class="cell cell-center"> ... </div> <div class="cell"> ... </div> </div>

 

三、使用table布局

使用table是最簡單而且相容性最好的。不過如果是主要區域的布局，你可能不會喜歡使用table去做。這就要看個人的取捨和項目的實際需求了。
四、使用javascript動態控制高度

這個也沒什麼好說的，先擷取最外層的高度，然後動態控制裡面每列的高度。
五、使用背景偽裝等高

這是一種常用的方法，也是一般人最先想到的。使用背景圖片通過repeat-y來平鋪最外層的背景，達到偽裝等高的效果。

給容器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; background: #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），並且可以很容易建立任意列數。

缺點：

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