做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>