高度相等列在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ù)娜菀住Ｗ詈玫募夹g(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)多列的等高視覺效果，正如下圖所示：

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

Html Markup

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表