CSS之创建等高列布局之一

高度相等列在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”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步

前面我们对三个内容元素都进行了相对定位，现在只需要按第五步将其定位回去，如上图所示。其实说到最后，你只要理解了这两幅，你就什么都清楚了

缺点：这种方法不像其他方法一样简单明了，给你理解会带来一定难度，但是只要你理解清楚了，将能帮你创建任意列数的等高布局效果