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

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

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

方法1：假等高列

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

HTML:

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

CSS:

這里讓外部容器背景在Y軸延伸背景，三列全部左浮動，但是缺點是不適合流體布局等高列的布局，另外如果你需要更換背景色或實現其他列數的等高列時，都需要重新制作過背景圖

方法2：給容器div使用單獨的背景色（固定布局）

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

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

HTML：

CSS：

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

第一步：首先給’.rightWrap’和’.leftWrap’還有’.contentWrap’三個列容器設置浮動讓其具備包裹性，同時設置其寬度跟父容器相同，最后在三個列都和父容器等寬的前提下分別向左移動一段距離，移動的距離就是你所要設置的列的寬度，又因為這三個容器是父子關系，所以子元素的高度變化必然導致父元素的高度一起變化，所以這樣最后的效果看起來就是三個列橫向排布，且等高的布局。

注意：到此已經實現了三個列等高的效果，但是因為內容還都是在外部的，所以此時添加內容后的效果不好，我們要做的就是將內容繼續調整

我們發現包含內容的三個div都已經在外部，我們需要將它們調整回來，很明顯現在的文字都在淺綠色容器內縱向排列，我們只要知道將淺綠色容器移動回來的值，那也就意味著知道了文字移動了回來的值，因為既然是父子容器那么必然是疊加的，上面的顏色層會改住下面的層，只是現在移動開了所以露出了下面的層，所以淺綠色移動回來的值等于它當初移動出去時候的距離’黃色的寬+深綠色的寬’，這里就是320+420=740px

第二步：給每個子元素設置浮動后再將其的固定寬度設置為之前父子容器偏移的固定距離，并且讓其相對定位后偏移指定的距離即可(這個距離就是320+420)，因為這里是相對定位所以哪怕前面的元素通過left移動走了，原來的空間還是要進行保留，再加上浮動讓后面的元素本身就和前面的元素在同行顯示

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

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

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

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

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

總結

以上是生活随笔為你收集整理的CSS之创建等高列布局之一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。