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

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

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

方法1：假等高列

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

HTML:

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

CSS:

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

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

這種方法實現(xiàn)有點復(fù)雜，如果你理解其實現(xiàn)過程也是相當?shù)暮唵巍＿@種方法我們主要給每一列的背景設(shè)在單獨的<div>元素上。這種方法的實現(xiàn)的原則是：任何<div>元素的最大高度來撐大其他的<div>容器高度。如下圖所示

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

HTML：

CSS：

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

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

注意：到此已經(jīng)實現(xiàn)了三個列等高的效果，但是因為內(nèi)容還都是在外部的，所以此時添加內(nèi)容后的效果不好，我們要做的就是將內(nèi)容繼續(xù)調(diào)整

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

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

用兩幅圖來展示其實現(xiàn)的過程

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。