啊，inline-block，挺難琢磨并且迷人的聲明上承諾了很多，其實提供了很少。很多次我拿到類似這樣的 PSD 文件：

就哭了。

一般說來，這種類型的布局是小菜一樁。固定寬度，固定高度，向左浮動就解決了。但是，這個設計中內容的多少是可變的，這就意味著如果這些塊中的一些內容比其他的多，就會破壞這個布局。

因為第一個展示項比其他項高，第五個項目就相對第一個浮動，而不是位于它下面了。基本上我們想要一個彈性表格的布局，但是適當的，語義標記。

我們以一個無序列表開始這個簡單的頁面，并把 display 設置為 inline-block:

顯然，在垂直排列上有些錯誤。嗯，也不算錯誤吧，這是正確的表現，只不過不是我們想要的效果。

這是因為每個 <li> 元素的基線是和其父元素 <ul> 的基線對齊排列的。你要問啥是基線？一圖頂千言那：

基線就是橫貫上面文本的黑線。盡量說的簡單點。inline 或者 inline-block 元素默認的 vertical-align 值 就是基線。也就是說元素基線要和她父元素的基線對齊。下面有一個示例：

就如所看到的，每個基線都是和文本 ‘This is the baseline.’ 的基線對齊的。文本雖然不在 <li> 內部，但是文本節點的父元素 <ul> 就指出了父元素的基線所在。

總之，修正方法是很簡單的： vertical-align: top，這樣就能得到一個看起來不錯阿網格：

但是在 Firefox 2, IE 6 和 7 中，依然無效：

從 Firefox 2 入手。