解决web相册各项高度不一致的方案（不使用浮动）
做WEB页面的时候经常会做相册列表，也是最常见的一种相册列表：列表里面有很多张图片，每张图片下面都会有一个标题，点击标题可以跳转，如下图：
做这样一个布局，第一时间想到的就是外面一个id="wall"的div标签，里面有6个class="item"的div标签(随便多少个都行，这里假定是6个)，每一个class="item"的div标签里面有一个class="itemImage"的img标签和一个class="itemTitle"的a标签，于是就写出了以下的代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>精美图册</title>
6 </head>
7 <body>
8 <div id="wall">
9 <div class="item">
10 <img src="Images/1.jpg" alt="龟兔赛跑" class="itemImage" />
11 <a href="#" class="itemTitle">龟兔赛跑</a>
12 </div>
13 <div class="item">
14 <img src="Images/2.jpg" alt="可爱MM" class="itemImage" />
15 <a href="#" class="itemTitle">可爱MM</a>
16 </div>
17 <div class="item">
18 <img src="Images/3.jpg" alt="天使MM" class="itemImage" />
19 <a href="#" class="itemTitle">天使MM</a>
20 </div>
21 <div class="item">
22 <img src="Images/4.jpg" alt="梦幻小屋" class="itemImage" />
23 <a href="#" class="itemTitle">梦幻小屋</a>
24 </div>
25 <div class="item">
26 <img src="Images/5.jpg" alt="森林木屋" class="itemImage" />
27 <a href="#" class="itemTitle">森林木屋</a>
28 </div>
29 <div class="item">
30 <img src="Images/6.jpg" alt="单车MM" class="itemImage" />
31 <a href="#" class="itemTitle">单车MM</a>
32 </div>
33 </div>
34 </body>
35 </html>
很简单也很清晰，接下来是写样式，介绍两种做法，第一种是我以前的做法，第二种是我后来改进了的做法，下面先说第一种做法：
CSS如下：
1 <style type="text/css">
2 *{ font-family:微软雅黑;}
3 #wall{width:800px; margin:0 auto; border:solid 2px #999; font-size:0;}
4 .item{float:left;margin:10px; width:208px;}
5 .itemImage{ border:solid 2px #efefef; padding:2px;}
6 .itemTitle{ display:block; width:100%; text-align:center; font-size:12px; color:#666; text-decoration:none; line-height:20px; margin-top:5px;}
7 .itemTitle:hover{ color:red;}
8 </style>
结果就得到了以下的效果：
id="wall"的div看起来就好像没有包住里面的元素，高度变0了，出现这个bug一点也不奇怪，这就只是因为id="wall"的div的子元素都设为了浮动，而它本身并没有浮动，这时候只要清除一下浮动就可以了，清除浮动可以加一个clear:"both"的div。加上清除浮动后，HTML代码和CSS代码就变成：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>精美图册</title>
6 <style type="text/css">
7 *{ font-family:微软雅黑;}
8 #wall{width:800px; margin:0 auto; border:solid 2px #999; font-size:0;}
9 .item{float:left;margin:10px; width:208px;}
10 .itemImage{ border:solid 2px #efefef; padding:2px;}
11 .itemTitle{ display:block; width:100%; text-align:center; font-size:12px; color:#666; text-decoration:none; line-height:20px; margin-top:5px;}
12 .itemTitle:hover{ color:red;}
13 .clear{ clear:both;}
14 </style>
15 </head>
16 <body>
17 <div id="wall">
18 <div class="item">
19 <img src="Images/1.jpg" alt="龟兔赛跑" class="itemImage" />
20 <a href="#" class="itemTitle">龟兔赛跑</a>
21 </div>
22 <div class="item">
23 <img src="Images/2.jpg" alt="可爱MM" class="itemImage" />
24 <a href="#" class="itemTitle">可爱MM</a>
25 </div>
26 <div class="item">
27 <img src="Images/3.jpg" alt="天使MM" class="itemImage" />
28 <a href="#" class="itemTitle">天使MM</a>
29 </div>
30 <div class="item">
31 <img src="Images/4.jpg" alt="梦幻小屋" class="itemImage" />
32 <a href="#" class="itemTitle">梦幻小屋</a>
33 </div>
34 <div class="item">
35 <img src="Images/5.jpg" alt="森林木屋" class="itemImage" />
36 <a href="#" class="itemTitle">森林木屋</a>
37 </div>
38 <div class="item">
39 <img src="Images/6.jpg" alt="单车MM" class="itemImage" />
40 <a href="#" class="itemTitle">单车MM</a>
41 </div>
42
43 <div class="clear"></div>
44
45 </div>
46 </body>
47 </html>
得到的效果如下：
之后就是想想怎样把里面的相片整体在id="wall"的div里居中，我选择了用padding，思路就是：把id="wall"的div的width减小一点，增加一点padding-left来制造出居中的效果，于是就改了一个样式：
1 #wall{width:745px; padding-left:55px; margin:0 auto; border:solid 2px #999; font-size:0;}
整个页面的代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>精美图册</title>
6 <style type="text/css">
7 *{ font-family:微软雅黑;}
8 #wall{width:745px; padding-left:55px; margin:0 auto; border:solid 2px #999; font-size:0;}
9 .item{float:left;margin:10px; width:208px;}
10 .itemImage{ border:solid 2px #efefef; padding:2px;}
11 .itemTitle{ display:block; width:100%; text-align:center; font-size:12px; color:#666; text-decoration:none; line-height:20px; margin-top:5px;}
12 .itemTitle:hover{ color:red;}
13 .clear{ clear:both;}
14 </style>
15 </head>
16 <body>
17 <div id="wall">
18 <div class="item">
19 <img src="Images/1.jpg" alt="龟兔赛跑" class="itemImage" />
20 <a href="#" class="itemTitle">龟兔赛跑</a>
21 </div>
22 <div class="item">
23 <img src="Images/2.jpg" alt="可爱MM" class="itemImage" />
24 <a href="#" class="itemTitle">可爱MM</a>
25 </div>
26 <div class="item">
27 <img src="Images/3.jpg" alt="天使MM" class="itemImage" />
28 <a href="#" class="itemTitle">天使MM</a>
29 </div>
30 <div class="item">
31 <img src="Images/4.jpg" alt="梦幻小屋" class="itemImage" />
32 <a href="#" class="itemTitle">梦幻小屋</a>
33 </div>
34 <div class="item">
35 <img src="Images/5.jpg" alt="森林木屋" class="itemImage" />
36 <a href="#" class="itemTitle">森林木屋</a>
37 </div>
38 <div class="item">
39 <img src="Images/6.jpg" alt="单车MM" class="itemImage" />
40 <a href="#" class="itemTitle">单车MM</a>
41 </div>
42
43 <div class="clear"></div>
44
45 </div>
46 </body>
47 </html>
以上就是我说的第一种方法，其实已经完全实现了需求，后来的很长一段时间我都是这样子的做法，没出过什么问题，但后来做了一个商城的首页，布局也是跟这个差不多，每项是图片+标题+价格+一些按钮如“喜欢”、“分享”等，但有些标题较长成了两行，而有些标题只有一行，结果就有BUG了！出现的情况类似于下图所示：
看到这个让人蛋痛的效果，一开始还以为是浏览器不兼容了，结果发现每一个浏览器都这样，研究了很久没有得到解决办法，只好“曲线救国”了，我给每一个class="item"的div加上了一个height,固定死每一个项的高度，结果整齐了。
标题也在后台限制了字数，最多只能有两行容纳得下的字数，当时也没去多想，反正解决了需求，那时也没去考虑其他方法了，解决后的效果如下：
以上的补救办法很不科学，至少我自己是这样认为的，我是想应该是有办法可以做到自适应，无论标题有多少行，都能整齐排列好，于是排除万难后我想到了第二种思路，不过在说第二种思路之前先按我个人理解简单说一下多行标题的时候排列不齐的原因：
可以看到相册里面现在有6项，除第一项有两行标题外，其他5项都是一行标题，这时候就是说第一项的总高度比其他5项都要高，其他5项的高度是一致的，效果简化一下就像这样子：
专业是说法我就不会了，不过形象一点比喻可以这样理解：上面就像一个停车场，有6辆车，每一辆车都是从右往左开过去的，第4辆车知道第一行的停车位停满了车，只能进第二行的停车位，但第4辆车开到第2辆车旁边的时候发现前面的第1辆车太大挡住了去路，第4辆车过不去就只好停在了第2辆车的旁边，结果就留下了第1辆旁边的空位，后面的车也是依然从右往左开，第5辆就自然而然停在第4辆后面，第6辆认为上面两行停满了车就从第三行的开进去，一直开到最前面的位置。
接下来说第二种方法，个人觉得是完美解决了以上相册高度不一至的所造成的排列不齐，无论某一项，或某几项标题有多长都不会影响布局。
HTML代码先还原成以下所示：
1 <body>
2 <div id="wall">
3 <div class="item">
4 <img src="Images/1.jpg" alt="龟兔赛跑" class="itemImage" />
5 <a href="#" class="itemTitle">龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑</a>
6 </div>
7 <div class="item">
8 <img src="Images/2.jpg" alt="可爱MM" class="itemImage" />
9 <a href="#" class="itemTitle">可爱MM</a>
10 </div>
11 <div class="item">
12 <img src="Images/3.jpg" alt="天使MM" class="itemImage" />
13 <a href="#" class="itemTitle">天使MM</a>
14 </div>
15 <div class="item">
16 <img src="Images/4.jpg" alt="梦幻小屋" class="itemImage" />
17 <a href="#" class="itemTitle">梦幻小屋</a>
18 </div>
19 <div class="item">
20 <img src="Images/5.jpg" alt="森林木屋" class="itemImage" />
21 <a href="#" class="itemTitle">森林木屋</a>
22 </div>
23 <div class="item">
24 <img src="Images/6.jpg" alt="单车MM" class="itemImage" />
25 <a href="#" class="itemTitle">单车MM</a>
26 </div>
27 </div>
28 </body>
接下来我是想，如果id="wall"的div里面的各项并不是div而直接就是6个img，而6张图片的高度参差不齐，那么会不会出现出现排列不齐的BUG？我试完后的结论是：不会，但所有图片都底部对齐了，于是我为每一张图片加了一个样式vertical-align:top，如此之后就达到目的了。于是我就想图片跟div不一样的只是div是块级元素，img是行内元素，只要把class="item"的div的display设为inline就好了，而且它没必要用浮动，可以像图片排列一样，但这样子的话div就没法设置宽度了，失去了layout属性，于是就得用上inline-block了，所以我的完整样式如下：
1 <style type="text/css">
2 *{ font-family:微软雅黑;}
3 #wall{ width:800px; margin:0 auto; border:solid 2px #999; text-align:center; font-size:0;}
4 .item{ display:inline-block; margin:10px; width:208px; *display:inline; zoom:1; vertical-align:top;}
5 .itemImage{ border:solid 2px #efefef; padding:2px;}
6 .itemTitle{ display:block; width:100%; text-align:center; font-size:12px; color:#666; text-decoration:none; line-height:20px; margin-top:5px;}
7 .itemTitle:hover{ color:red;}
8 </style>
上面样式中值得一提的是font-size:0，*display:inline;*zoom:1;
由于ie6,ie7都是不支持display:inline-block的，所以就用*display:inline;*zoom:1;去兼融IE6和IE7。
至于font-size:0；是为了消除行内元素的代码换行所造成的多余空隙。
以上就是第二种方法的HTML和CSS。
第二种解决方案的页面的完整代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>精美图册</title>
6 <style type="text/css">
7 *{ font-family:微软雅黑;}
8 #wall{ width:800px; margin:0 auto; border:solid 2px #999; text-align:center; font-size:0;}
9 .item{ display:inline-block; margin:10px; width:208px; *display:inline; zoom:1; vertical-align:top;}
10 .itemImage{ border:solid 2px #efefef; padding:2px;}
11 .itemTitle{ display:block; width:100%; text-align:center; font-size:12px; color:#666; text-decoration:none; line-height:20px; margin-top:5px;}
12 .itemTitle:hover{ color:red;}
13 </style>
14 </head>
15 <body>
16 <div id="wall">
17 <div class="item">
18 <img src="Images/1.jpg" alt="龟兔赛跑" class="itemImage" />
19 <a href="#" class="itemTitle">龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑龟兔赛跑</a>
20 </div>
21 <div class="item">
22 <img src="Images/2.jpg" alt="可爱MM" class="itemImage" />
23 <a href="#" class="itemTitle">可爱MM</a>
24 </div>
25 <div class="item">
26 <img src="Images/3.jpg" alt="天使MM" class="itemImage" />
27 <a href="#" class="itemTitle">天使MM</a>
28 </div>
29 <div class="item">
30 <img src="Images/4.jpg" alt="梦幻小屋" class="itemImage" />
31 <a href="#" class="itemTitle">梦幻小屋</a>
32 </div>
33 <div class="item">
34 <img src="Images/5.jpg" alt="森林木屋" class="itemImage" />
35 <a href="#" class="itemTitle">森林木屋</a>
36 </div>
37 <div class="item">
38 <img src="Images/6.jpg" alt="单车MM" class="itemImage" />
39 <a href="#" class="itemTitle">单车MM</a>
40 </div>
41 </div>
42 </body>
43 </html>
