基於display:inline-block的列表布局
一、用float（浮動）實現列表布局的局限
一說起列表布局。大家首先想到的就是用浮動float。這是相當常見的也是目前最最主流的列表布局方式，所以這裏就不吃鹹魚蘸醬油——多此一舉了。對於浮動局部的局限性，想必同行們都知道，就是每個列表元素的高度必須要一致，否則就會像是俄羅斯方塊一樣，“鋸齒相錯”，例如一個左浮動列表布局，如果第一行有個列表高度高於其他列表，那就在第二行，第一個元素會沿著最高元素的右側對齊，此原因是屬於惡魔系的float屬性破壞了inline box。如下圖：
浮動本身就是個魔鬼，所以，使用浮動布局還需要修復其帶來的副作用——高度塌陷的問題，也就是常提到的“清除浮動”了。
二、表格實現列表布局
在表格布局時代，基本上不用擔心列表元素高度不一會錯位的問題，表格中的單元格(td標簽)自動會等高關聯，且水平列表項還包裹在tr等標簽中，所以，不可能發生錯位。所以，很正常的，我們會想到利用類似table屬性的樣式進行一些布局，例如display:table; display:table-row; display:table-cell;等屬性，如果不是受制於IE6/7對這些display屬性不支持，基於display:table的CSS布局定會大放異彩的。
如果想使用display:table的CSS布局來代替浮動布局，權衡來看，不見得有提高。好的地方在於，不要擔心列表元素的高度不一，甚至自動等高。撇開兼容性不談，其還有不足在於在後臺循環輸出時需要水平repeat下，然後再垂直repeat。既然這樣，還不如使用浮動布局，因為在這種情況下，使用浮動也是可以不用擔心高度不一的問題的。所以，基本上，使用display:table的CSS布局來代替浮動布局是完全占據下風的。
三、另外一種display屬性，display:inline-block
display:inline-block感覺與display:table-cell有些相似，例如對內部元素的包裹性。但是，由於display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內嵌block屬性元素，可以可以置身於inline水平的元素中。可謂黑白通吃，左右逢源。
inline-block屬性的元素適用於inline box模型，所以，當其中的列表元素高度不一時，是不會有錯位的。一言以蔽之，就是每一行所有的inline元素和inline-block元素會共同形成一個line boxes，這個line box的高度由裏面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個line boxes的高度，因而，不會與下一行的列表元素發生錯位。如下示意圖所示的：
對於IE8+以及現代瀏覽器，直接使用： {display:inline-block;}
對於IE6/7瀏覽器， *display:inline; *zoom:1;
所以兼容寫法： display:inline-block; *display:inline; *zoom:1;
四、一點小阻撓：inline-block元素間的換行符空格間隙問題
在完整的展示兼容性的像素級的inline-block元素列表布局前，有必要講講使用display:inline-block列表布局經常會遇到的“換行符/空格間隙問題”。
如果inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。如果沒有空格與間隙才是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像個圖片一樣。例如，兩個不在一行的img標簽，形成的兩個圖片之間就會有間隙，如下圖所示：
去除inline-block間距的方法有很多。這裏只用一種方便的寫法： font-size:0; 。這個IE6/7/8 都是兼容的。之前倒是谷歌Chrome不兼容font-size:0;，不過現在也兼容了。
五、總結：
大盒子(big-box)裏裝著小盒子(litter-box)
big-box --> big-box {text-align:center; font-size:0;} 內部小盒子居中顯示。
big-box {text-align:justify; text-justify:distribute-all-lines;} 內部小盒子兩端對齊。（若內容不夠一行，則不會有效果，即使你強制換行也沒用）。text-justify是IE兼容寫法。
span{ display:inline-block; width:100%;} 在內部小盒子中加入一個span元素，給予這個css樣式，可以規避內容不夠一行的情況。
litter-box --> litter-box {display:inline-block; *display:inline; *zoom:1; vertical-align:top;} 拋棄浮動。這裏vertical-align是小盒子的對齊方式。*XXX是IE兼容寫法。
如果是多層套用。則最外層元素寫text-align，下面一層層都變為內聯元素。
基於display:inline-block的列表布局