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

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

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

方法1：假等高列

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

HTML:

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

CSS:

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

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

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

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

HTML：

CSS：

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

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

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

我們發(fā)現(xiàn)包含內(nèi)容的三個(gè)div都已經(jīng)在外部，我們需要將它們調(diào)整回來，很明顯現(xiàn)在的文字都在淺綠色容器內(nèi)縱向排列，我們只要知道將淺綠色容器移動(dòng)回來的值，那也就意味著知道了文字移動(dòng)了回來的值，因?yàn)榧热皇歉缸尤萜髂敲幢厝皇钳B加的，上面的顏色層會(huì)改住下面的層，只是現(xiàn)在移動(dòng)開了所以露出了下面的層，所以淺綠色移動(dòng)回來的值等于它當(dāng)初移動(dòng)出去時(shí)候的距離’黃色的寬+深綠色的寬’，這里就是320+420=740px

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

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

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

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

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

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

總結(jié)

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

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