创建等高列布局的八种方法

最近正在考虑写一篇关于CSS等高布局的文章，今天就在微博上看到W3CPlus上发表的一篇文章《八种创建等高列布局》，看了也是颇有收获，特收藏于此，也同大家分享。

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。

如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片，在你多列的父元素中进行垂直铺放，从而达到一种假像（假的多列等高布局效果）。但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了，那么是不是就没有办法实现了呢？那当然不是那么回事了，不管是实现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的，这些方法体现了CSS的不同技术，也各有千秋，下面我们就一起来探讨Web页面中的多列等高的实现技术。

下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示：

一、假等高列

这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：

Html Markup

1. <divclass=”containerclearfix”>
2. <divclass=”left”></div>
3. <divclass=”content”></div>
4. <divclass=”right”></div>
5. </div>

在制作样式之前需要一张类似下面的背景图：

CSS Code:

1. .container{
2. background:url("column.png")repeat-y;
3. width:960px;
4. margin:0auto;
5. }
6. .left{
7. float:left;
8. width:220px;
9. }
10. .content{
11. float:left;
12. width:480px;
13. }
14. .right{
15. float:left;
16. width:220px;
17. }

优点：

实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。

缺点：

使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。

二、给容器div使用单独的背景色（固定布局）

这种方法实现有点复杂，如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的<div>元素上。这种方法的实现的原则是：任何<div>元素的最大高度来撑大其他的<div>容器高度。如下图所示：

上图中，不管我们哪一列的高度最高，那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化，下面我们一起来看其实现过程：

Html Markup

1. <div>
2. <div>
3. <div>
4. <div>
5. <divid="left"></div>
6. <divid="content"></div>
7. <divid="right"></div>
8. </div>
9. </div>
10. </div>
11. </div>

CSS Code:

1. <styletype="text/css">
2. .container{
3. width:960px;
4. margin:0auto;
5. }
6. .rightWrap{
7. width:100%;
8. float:left;
9. background:green;
10. overflow:hidden;
11. position:relative;
12. }
14. .contentWrap{
15. float:left;
16. background:orange;
17. width:100%;
18. position:relative;
19. right:320px;/*此值等于rightSidebar的宽度*/
20. }
22. .leftWrap{
23. width:100%;
24. background:lime;
25. float:left;
26. position:relative;
27. right:420px;/*此值等于Content的宽度*/
28. }
29. #left {
30. float:left;
31. width:220px;
32. overflow:hidden;
33. position:relative;
34. left:740px;
35. }
36. #content {
37. float:left;
38. width:420px;
39. overflow:hidden;
40. position:relative;
41. left:740px;
42. }
43. #right {
44. float:left;
45. overflow:hidden;
46. width:320px;
47. position:#333;
48. position:relative;
49. left:740px;
50. }
51. </style>

看起来蛮复杂吧？其实你只要了解了它是如何的工作原理就会变得非常简单，你只要理解并掌握以下几点：

1. “div.rightWrap”、“div.contentWrap”、“div.leftWrap”都是一个封闭的容器；而“div#left”、“div#content”、“div#right”就是我们所说的列，里面放了内容；
2. 每一个容器对应一列的背景色（用来放置背景色或背景图片）；此例对应的是：“div.rgithWrap”用来实现“div#right”列的背景色；“div.contentWrap”用来实现“div#content”列的背景色；“div.leftWrap”用来实现“div#left”列的背景色；
3. 除了最外面的容器（也就是对应的最左列容器）外，我都都对他们进行相对定位，并且设置其“right”值，此值并和相对应的列宽相等。此例中“div.contentWrap”对应的刚好是“div#right”的宽度；而“div.leftWrap”对应用的刚好是“div#content”的宽度；
4. 给每列进行左浮动，并设置其列宽
5. 给每一列设置相对定位，并进行“left”设置，而且“left”的值等于除第一列的所有列宽的和。此例中“left”的值等于“div#right”和“div#content”两列的宽度之和，也就是320px+420=740px

用两幅图来展示其实现的过程：

下图是实现上面的第二步对应的示例图，也就是容器“div.rightWrap”，“div.contentWrap”，“div.leftWrap”进行相对定位（position: releative）,并展示了如何设置对应的“right”值。

上图虚线代表的范围是可视范围，其中有两列背景将会溢出，解决这个只需要在最外层容器“div.rightWrap”加上“overflow:hidden”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步：

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

优点：

这种方法是不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列布局，并且能兼容所有浏览器（包括IE6），并且可以很容易创建任意列数。

缺点：

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

三、给容器div使用单独的背景色（流体布局）

这种布局可以说是就是第二种布局方法，只是这里是一种多列的流体等高列的布局方法。前面也说过了，其实现原理就是给每一列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器。如下图所示：

HTML Markup

1. <divid="container3">
2. <divid="container2">
3. <divid="container1">
4. <divid="col1">Column 1</div>
5. <divid="col2">Column 2</div>
6. <divid="col3">Column 3</div>
7. </div>
8. </div>
9. </div>

CSS Code:

1. <styletype="text/css">
2. #container3 {
3. float:left;
4. width:100%;
5. background:green;/**/
6. overflow:hidden;
7. position:relative;
8. }
10. #container2 {
11. float:left;
12. width:100%;
13. background:yellow;
14. position:relative;
15. right:30%;/*大小等于col3的宽度*/
16. }
18. #container1 {
19. float:left;
20. width:100%;
21. background:orange;
22. position:relative;
23. right:40%;/*大小等于col2的宽度*/
24. }
26. #col1 {
27. float:left;
28. width:26%;/*增加了2%的padding，所以宽度减少4%*/
29. position:relative;
30. left:72%;/*距左边呀增加2%就成72%*/
31. overflow:hidden;
32. }
33. #col2 {
34. float:left;
35. width:36%;/*增加了2%的padding，所以宽度减少4%*/
36. position:relative;
37. left:76%;/*距左边有三个padding为2%,所以距离变成76%*/
38. overflow:hidden;
39. }
40. #col3 {
41. float:left;
42. width:26%;/*增加了2%的padding，所以宽度减少4%*/
43. position:relative;
44. left:80%;/*距左边5个padding为2%，所以距离变成80%*/
45. overflow:hidden;
46. }
47. </style>

上面展示的是三列的，下面我们在来看一下两列和更多列的模板：

两列的HTML Markup：

1. <divid="container2">
2. <divid="container1">
3. <divid="col1">Column 1</div>
4. <divid="col2">Column 2</div>
5. </div>
6. </div>

两列的CSS Code:

1. <styletype="text/css">
2. #container2 {
3. float:left;
4. width:100%;
5. background:orange;
6. position:relative;
7. overflow:hidden;
8. }
9. #container1 {
10. float:left;
11. width:100%;
12. background:green;
13. position:relative;
14. right:30%;
15. }
17. #col1 {
18. width:66%;
19. float:left;
20. position:relative;
21. left:32%;
22. }
24. #col2 {
25. width:26%;
26. float:left;
27. position:relative;
28. left:36%;
29. }
30. </style>

四列的HTML Markup：

1. <divid="container4">
2. <divid="container3">
3. <divid="container2">
4. <divid="container1">
5. <divid="col1">col1</div>
6. <divid="col2">col2</div>
7. <divid="col3">col3</div>
8. <divid="col4">col4</div>
9. </div>
10. </div>
11. </div>
12. </div>

四列的CSS　Code：

1. <styletype="text/css">
2. #container4 {
3. float:left;
4. width:100%;
5. background:green;
6. position:relative;
7. overflow:hidden;
8. }
10. #container3 {
11. float:left;
12. width:100%;
13. background:#B2F0F9;
14. position:relative;
15. right:20%;/*此值等于col4的宽度*/
16. }
18. #container2 {
19. float:left;
20. width:100%;
21. background:#89FFA2;
22. position:relative;
23. right:30%;/*此值等于col3的宽度*/
24. }
26. #container1 {
27. float:left;
28. width:100%;
29. background:#369;
30. position:relative;
31. right:30%;/*此值等于col2的宽度*/
32. }
34. #col1 {
35. width:18%;/*1%的padding*/
36. float:left;
37. position:relative;
38. left:81%;
39. overflow:hidden;
40. }
42. #col2 {
43. float:left;
44. width:28%;
45. position:relative;
46. left:83%;
47. overflow:hidden;
48. }
50. #col3 {
51. float:left;
52. width:28%;
53. position:relative;
54. left:85%;
55. overflow:hidden;
56. }
58. #col4 {
59. float:left;
60. width:18%;
61. position:relative;
62. left:87%;
63. overflow:hidden;
64. }
65. </style>

下面来看其实现过程，如果你理解了第二制作方法，那么这个你不用想一下就知道他们是一样的道理，如果你对第二种方法还不够清楚，那么你接着看这下面的内容，你会更清楚他们是怎么一回事的。下面我们一起来看三列的实现过程：

上图展示了，我们有三列，并且也说过了，这三列内容都放在了三个容器的div中，我们每一列的背景色不是放在内容列中，而是放置在容器中，现在我们需要通过对容器进行相对定位，把背景显示出来，而且我们这个容器是最外层的不能进行相对定位的移动，具体的请看下图：

上面我们把容器进行了相对定位，这样一来，我们内容也相应的做了移动，现在我们需要对页面列的内容也进行相对定位，并把内容和容器进行相反方向的定位，这样内容和容器背景色就能对应上了，请看下图所展示的：

接下来我们需要把溢出的部分切掉去，和前面一相，在最外面的容器加上overflow:hidden；这样就OK了。

最后为了让你的效果更加好看一点，你可以尝试给他们加上padding，比如说每列加上2%的padding值，具体实现可以简单从下图中得到：

优点：

兼容各浏览器，可以制作流体等高列，交无列数限制。

缺点：

标签使用较多，结构过于复杂，不易于理解，不过你掌握了其原理也就不难了，这也不算太大缺点。

三、创建带边框的现列等高布局

平常在制作中，我们需要制作两列的等高效果，并且有一条边框效果，那么这个实例我们就一起来看其实现方法：

Html Code

1. <divid="wrapper">
2. <divid="sidebar">
3. .....
4. </div>
5. <divid="main">
6. ....
7. </div>
8. </div>

CSS Code:

1. <styletype="text/css">
2. html{
3. background:#45473f;
4. height:auto;
5. }
7. body{
8. width:960px;
9. margin:20pxauto;
10. background:#ffe3a6;
11. border:1pxsolid#efefef;
12. }
14. #wrapper {
15. display:inline-block;
16. border-left:200pxsolid#d4c376;
17. position:relative;
18. vertical-align:bottom;
19. }
21. #sidebar {
22. float:left;
23. width:200px;
24. margin-left:-200px;
25. margin-right:-1px;
26. border-right:1pxsolid#888;
27. position:relative;
28. }
30. #main {
31. float:left;
32. border-left:1pxsolid#888;
33. }
35. #maing,
36. #sidebar{
37. padding-bottom:2em;
38. }
39. </style>

优点：

可以制作带有边框的两列等高布局，并能兼容所有浏览器，结构简单明了。

缺点：

不适合于更多列的应用，比如说三列以上，这样的方法就行不通了。

四、使用正padding和负margin对冲实现多列布局方法

这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。下面一起来看代码：

HTML Markup:

1. <divid="container">
2. <divid="left">
3. <p>Sidebar</p>
4. </div>
5. <divid="content">
6. <p>Main content</p>
7. </div>
8. <divid="right">
9. <p>Sidebar</p>
10. </div>
11. </div>

CSS Code:

1. <styletype="text/css">
3. #container {
4. margin:0auto;
5. overflow:hidden;
6. width:960px;
7. }
9. .column{
10. background:#ccc;
11. float:left;
12. width:200px;
13. margin-right:5px;
14. margin-bottom:-99999px;
15. padding-bottom:99999px;
16. }
18. #content {
19. background:#eee;
20. }
22. #right {
23. float:right;
24. margin-right:0;
25. }
26. </style>

优点：

这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器

缺点：

这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果。

下面我们就针对这个缺陷来介绍两种解决办法，第一种是使用背景图来模仿底部（或顶部）边框；第二种方法是使用div来模仿列的边框，下面我们来看这两种方法：

1、背景图模仿边框效果：

Html Code:

1. <divid="containerOuter">
2. <divid="containerInner">
3. <divid="left">
4. <p>Sidebar</p>
5. </div>
6. <divid="content">
7. <p>Main content</p>
8. </div>
9. <divid="right">
10. <p>Sidebar</p>
11. </div>
12. </div>
13. </div>

CSS Code:

1. <styletype="text/css">
2. #containerOuter {
3. background:url("images/bg.gif")no-repeat center bottom;
4. width:616px;
5. margin:0auto;
6. padding-bottom:1px;
7. overflow:hidden;
8. }
10. #containerInner {
11. float:left;
12. overflow:hidden;
13. margin-right:-5px;
14. }
16. .column{
17. background:#ccc;
18. border:1pxsolid#000;
19. float:left;
20. width:200px;
21. margin-right:5px;
22. margin-bottom:-99999px;
23. padding-bottom:99999px;
24. }
26. #content {
27. background:#eee;
28. }
29. </style>

这种方法我们需要在外面增加一个层，并将背景图放置在这个层的底部，而且需要制作一张和列边框色一致，并且要先排列好他们之间的间距，如下图所示：

这种方法有一个最大的不足之处就是，如果我们更改了列的边框的颜色，或者改变了他们之间的间距，都需要重新制作过一张背景图来重新模仿这样的效果，下面一起来看看这种方法带来的最后效果：

2、使用div来模仿列的边框

我们这种方法是在列里面添加一个div，用这个div来模仿边框的效果，具体看代码吧：

Html Code:

1. <div>
2. <div>
3. <div>
4. <div><!-- ie needs this comment for small div heights --></div>
5. </div>
6. <div>
7. <div><!-- ie needs this comment for small div heights --></div>
8. </div>
9. </div>
10. </div>

CSS Code:

1. <styletype="text/css">
2. .wrapper{
3. width:960px;
4. margin:0auto;
5. }
6. .container{
7. position:relative;
8. overflow:hidden;
9. zoom:1;
10. }/* zoom fix for ie6 */
11. .col1{
12. float:left;
13. width:728px;
14. padding-bottom:32767px;
15. margin-bottom:-32767px;
16. border:#f36 1px solid;
17. background:#AFAFAF;
18. }
19. .col2{
20. float:right;
21. width:208px;
22. padding-bottom:32767px;
23. margin-bottom:-32767px;
24. border:#f36 1px solid;
25. background:#6F6F6F;
26. }
27. .colBottom1{
28. position:absolute;/*相对于div.container*/
29. bottom:0;
30. left:0px;/*如果第一列左浮动就设置left:0;*/
31. height:1px;/*当前列的边框宽度*/
32. width:730px;/*当前列宽度+边框宽度*2 */
33. background:#f36;/*当前列的边框颜色*/
34. }
35. .colBottom2{
36. position:absolute;/*相对于div.container*/
37. bottom:0;
38. right:0px;/*如果第二列右浮动就设置left:0;*/
39. height:1px;/*当前列的边框宽度*/
40. width:210px;/*当前列宽度+边框宽度*2 */
41. background:#f36;/*当前列的边框颜色*/
42. }
44. </style>

五、使用边框和定位模拟列等高

这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。如：

Html Code:

1. <divid="wrapper">
2. <divid="mainContent">...</div>
3. <divid="sidebar">...</div>
4. </div>

CSS Code:

1. <styletype="text/css">
2. #wrapper {
3. width:960px;
4. margin:0auto;
5. }
7. #mainContent {
8. border-right:220pxsolid#dfdfdf;
9. position:absolute;
10. width:740px;
11. }
13. #sidebar {
14. background:#dfdfdf;
15. margin-left:740px;
16. position:absolute;
17. width:220px;
18. }
19. </style>

优点：

结构简单，兼容各浏览器，容易掌握。

缺点：

这个方法就是无法单独给主内容列设置背景色，并且实现多列效果效果不佳。

六、边框模仿等高列

第五种方法我们无法实现主列的背景色设置，针对上面方法，稍作一下改良，这样就可以实现主内容也设置颜色的效果了

CSS Html:

1. <divid="container">
2. <divid="content">This is<br/>some content</div>
3. <divid="right">This is the right</div>
4. </div>

CSS Code:

1. <styletype="text/css">
2. #container{
3. background-color:#0ff;
4. overflow:hidden;
5. width:960px;
6. margin:0auto;
7. }
8. #content{
9. background-color:#0ff;
10. width:740px;
11. border-right:220pxsolid#f00; /* 边框大小和颜色设置和right大小与颜色一样 */
12. margin-right:-220px;/*此负边距大小与right边栏宽度一样*/
13. float:left;
14. }
15. #right{
16. background-color:#f00;
17. width:220px;
18. float:left;
19. }
20. </style>

下面我们在此基础上改变流体布局：

HTML Markup

1. <divid="container">
2. <divid="content">Main content section</div>
3. <divid="sidebar">Right Sidebar</div>
4. </div>

1. <styletype="text/css">
2. #container{
3. background-color:#0ff;
4. overflow:hidden;
5. margin:0100px;
6. padding-right:220px;/* 宽度大小等与边栏宽度大小*/
7. }
8. *html#container{
9. height:1%;/* So IE plays nice */
10. }
11. #content{
12. background-color:#0ff;
13. width:100%;
14. border-right:220pxsolid#f00;
15. margin-right:-220px;
16. float:left;
17. }
18. #sidebar{
19. background-color:#f00;
20. width:220px;
21. float:left;
22. margin-right:-220px;
23. }
24. </style>

上面主要展示了这种方法的二列布局，下面我们在来看看三列布局的用法

HTML Markup

1. <divid="containerOuter">
2. <divid="container">
3. <divid="content">Main content section</div>
4. <divid="left">LEFT sidebar</div>
5. <divid="right">RIGHT sidebar</div>
6. </div>
7. </div>

CSS Code:

1. <styletype="text/css">
2. #containerOuter {
3. margin:0auto;
4. width:960px;
5. }
6. #container{
7. background-color:#0ff;
8. float:left;
9. width:520px;
10. border-left:220pxsolid#0f0; /* 边框大小等于左边栏宽度，颜色和左边栏背景色一致*/
11. border-right:220pxsolid#f00;/* 边框大小等于右边栏宽度，颜色和右边栏背景色一致*/
12. }
13. #left{
14. float:left;
15. width:220px;
16. margin-left:-220px;
17. position:relative;
18. }
19. #content{
20. float:left;
21. width:520px;
22. margin-right:-520px;
23. }
24. #right{
25. float:right;
26. width:220px;
27. margin-right:-220px;
28. position:relative;
29. }
30. </style>

接着在看一个三列自适应布局

Html Markup

1. <divid="container">
2. <divid="content">Main Content</div>
3. <divid="left">Left Sidebar</div>
4. <divid="right">Right Sidebar</div>
5. </div>

CSS Code

1. <styletype="text/css">
2. body{
3. margin:0100px;
4. padding:0220px0220px;
5. }
6. #container{
7. background-color:#0ff;
8. float:left;
9. width:100%;
10. border-left:220pxsolid#0f0;
11. border-right:220pxsolid#f00;
12. margin-left:-220px;
13. margin-right:-220px;
14. display:inline;/* So IE plays nice */
15. }
16. #left{
17. float:left;
18. width:220px;
19. margin-left:-220px;
20. position:relative;
21. }
22. #content{
23. float:left;
24. width:100%;
25. margin-right:-100%;
26. }
27. #right{
28. float:right;
29. width:220px;
30. margin-right:-220px;
31. position:relative;
32. }
33. </style>

优点：

能兼容所有浏览器效果，结构简单明了，容易掌握。

缺点：

列数受到极限，超过三列不好控制。

七、模仿表格布局实列等高列效果

这种方法只适合现代浏览器，本不想介绍的，不过还是顺便列出让大家参考一下吧：

HTML Markup:

1. <div>
2. <div>
3. <div>
4. <div>
5. ....
6. </div>
7. </div>
9. <div>
10. <div>
11. ...
12. </div>
13. </div>
15. <div>
16. <div>
17. ...
18. </div>
19. </div>
21. </div>
22. </div>

CSS Code:

1. <styletype="text/css">
2. .table{
3. width:auto;
4. min-width:1000px;
5. margin:0auto;
6. padding:0;
7. display:table;
8. }
10. .tableRow{
11. display:table-row;
12. }
14. .tableCell{
15. display:table-cell;
16. width:33%;
17. }
19. .cell1{
20. background:#f00;
21. }
23. .cell2{
24. background:#0f0;
25. }
27. .cell3{
28. background:#00f;
29. }
30. </style>

优点：

这是一种非常简单，易于实现的方法。

缺点：

兼容性不好，在ie6-7无法正常运行。

八、jQuery和javascript大法

最后要给大家介绍的是使用jQuery和javascript方法来实现多列的布局效果。

1、jQuery实现方法:

Html Markup

1. <div>
2. <divid="left"></div>
3. <divid="content"></div>
4. <divid="right"></div>
5. </div>

CSS Code:

1. <styletype="text/css">
2. .contanier{
3. width:960px;
4. margin:0auto;
5. }
7. .aside,
8. .section{
9. float:left;
10. width:33%;
11. background:lime;
12. }
14. .leftSidebar{background:orange;}
15. .section{background:green;}
16. </style>

jQuery Code:

1. <scripttype="text/javascript">
2. $(document).ready(function(){
3. //等高列的小插件
4. functionsetEqualHeight(columns){
5. vartallestColumn=0;
6. columns.each(function(){
7. currentHeight=$(this).height();
8. if(currentHeight>tallestColumn){
9. tallestColumn=currentHeight;
10. }
11. });
12. columns.height(tallestColumn);
13. }
14. //调用写好的插件，基中“.container > div”是你需要实现的等高列
15. setEqualHeight($(".container > div"));
16. });
17. </script>

你也可以把上面的jQuery代码换成下面的

1. <scripttype="text/javascript">
2. $(document).ready(function(){
3. varcurrentTallest=0,
4. currentRowStart=0,
5. rowDivs=newArray(),
6. $el,
7. topPosition=0;
9. $('.column').each(function(){
10. $el=$(this);
11. topPostion=$el.position().top;
12. if(currentRowStart!=topPostion){
13. // we just came to a new row. Set all the heights on the completed row
14. for(currentDiv=0;currentDiv<rowDivs.length;currentDiv++){
15. rowDivs[currentDiv].height(currentTallest);
16. }
17. // set the variables for the new row
18. rowDivs.length=0;// empty the array
19. currentRowStart=topPostion;
20. currentTallest=$el.height();
21. rowDivs.push($el);
22. }else{
23. // another div on the current row. Add it to the list and check if it's taller
24. rowDivs.push($el);
25. currentTallest=(currentTallest<$el.height())?($el.height()):(currentTallest);
26. }
27. // do the last row
28. for(currentDiv=0;currentDiv<rowDivs.length;currentDiv++){
29. rowDivs[currentDiv].height(currentTallest);
30. }
31. });?
32. });
33. </script>

如果你使用上面这个jQuery代码，你需要在需要实现等高列的div中加上"column"类名，这样才会有效果的。

2、JavaScript方法

上面是jQuery的实现方法，接下来看看javaScript的实现方法：

Html Markup:

1. <div>
2. <divid="left"></div>
3. <divid="content"></div>
4. <divid="right"></div>
5. </div>

CSS Code:

1. <styletype="text/css">
2. .contanier{
3. width:960px;
4. margin:0auto;
5. }
7. #left {
8. width:220px;
9. float:left;
10. margin-right:20px;
11. background:green;
12. }
14. #content {
15. width:480px;
16. float:left;
17. margin-right:20px;
18. background:lime;
19. }
21. #right {
22. width:220px;
23. float:right;
24. background:orange;
25. }
26. </style>

Javascript Code:

1. <scripttype="text/javascript">
2. functionmatchColumns(classname){
3. vardivs,contDivs,maxHeight,divHeight,d;
4. // get all <div> elements in the document
5. divs=document.getElementsByTagName('div');
6. contDivs=[];
7. // initialize maximum height value
8. maxHeight=0;
9. // iterate over all <div> elements in the document
10. for(vari=0;i<divs.length;i++){
11. // make collection with <div> elements with class attribute 'container'
12. if(newRegExp("\\b"+classname+"\\b").test(divs[i].className)){
13. d=divs[i];
14. contDivs[contDivs.length]=d;
15. // determine height for <div> element
16. if(d.offsetHeight){
17. divHeight=d.offsetHeight;
18. }
19. elseif(d.style.pixelHeight){
20. divHeight=d.style.pixelHeight;
21. }
22. // calculate maximum height
23. maxHeight=Math.max(maxHeight,divHeight);
24. }
25. }
26. // assign maximum height value to all of container <div> elements
27. for(vari=0;i<contDivs.length;i++){
28. contDivs[i].style.height=maxHeight+"px";
29. }
30. }
31. // Runs the script when page loads
32. window.onload=function(){
33. if(document.getElementsByTagName){
35. matchColumns('column');//
36. }
37. }
38. </script>

上面八大种方法就是我今天要跟大家一起分享的等高列的布局方法，他们之间更有千秋，希望能给需要的您带来一定的帮助。篇幅过长，慢慢看吧，上面的代码都是经过测试的，兼容各大浏览器，可以直接复制代码使用。