white-space:nowrap 的妙用

對於多個元素同在同一行的佈局，如比較常見的是輪播。下麵我將探討這這一佈局的做法：
首先約定html結果如下：

div.row
  div.col
  div.col
  div.col
  ...

做法一：

設定div.row的寬度為div.col寬度*div.col的個數，然後設置div.col為float:left或display:inline-block
對於 float:left, div.row 需要清除浮動。
對於 display:inline-block，需要壓縮html或者為div.row設置 font-size:0 以去除 div.col 之間的水平間隙，後者也順便去除了垂直方向的間隙（line-height為相對單位時，其最終值為line-height值*font-size）。對於前者，還有垂直方面的間隙未去除，我們可以為div.col設置 vertical-align:top 或為div.row設置 line-height:0。推薦前者（即vertical-align），因為當 div.col 高度不相等時，會按頂部對齊，當然你也可以bottom或middle。而且，如果div.col內含有行內元素或inline-block元素時，div.col會按其子元素最後一行inline/inline-block元素的基線進行垂直方向上的對齊（vertical-align預設值是baseline）。因此最好顯式設置div.col的垂直方向上的對齊。

baseline基線

水平與豎直方向上的間隙

按其子元素最後一行inline/inline-block元素的基線進行垂直方向上的對齊

這也符合張鑫旭老師的《CSS深入理解vertical-align和line-height的基友關係》這篇文章講到的：一個inline-block元素，如果裡面沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣，否則，其基線就是元素裡面最後一行內聯元素的基線。

補充知識：line-height的值為數字與百分比的區別

百分比是當前元素的字體大小*百分比，算出的值讓後代元素繼承（固定值，後代元素均用此值）；而數字是讓後代元素的字體大小*數值（相對值，後代元素根據自身字體大小算出適合的行高）。具體可以看 《深入瞭解css的行高Line Height屬性》。

當然，如果div.row內有行內元素或inline-block元素，它們會繼承父元素的font-size與line-height，因此需要重新設置font-size和line-height，以覆蓋div.row對應的值。

做法一的案例有：淘寶首頁的主輪播（通過子元素浮動，父元素清除浮動）。
這種做法的好處有：①相容性好，無須清除div.col直接的間隙，因為浮動後的元素會一直與當前行框（line box）頂部對齊，vertical-align對齊無效。
不好的地方：要計算div.row的寬度。

做法二（這也是我想講的巧妙）

直接上代碼：

*{
    margin: 0;
    padding: 0;
}
.row{
    white-space: nowrap; // 讓div.col放置在同一行
    background-color: rgb(0,0,0); // 背景色，以方便觀察
    font-size: 0; // 去除水平+垂直間隙
}
.col{
    display: inline-block;
    *display: inline; // 相容IE 6/7，模擬inline-block效果
    *zoom: 1; // 相容IE 6/7，模擬inline-block效果
    width: 20%; 
    margin-right: 30px;
    height: 100px;
    background-color: red;
    font-size: 14px; // 覆蓋父元素的font-size
    vertical-align: top; // 向上對齊，同時去除垂直間隙
}

黑色背景是div.row，紅色背景是 div.col。

可看出這與與應用了white-space:nowrap的文本容器效果一樣。

做法二的好處有：

①相容性好（IE5都正常），無須計算寬度，可任意放多個 div.col，而 div.row 的寬度等於其父元素的寬度（但IE6則會將div.row撐大，在IE6中，width如同min-width效果，height也是）。

IE5上的效果，IE6應該也一樣。

如果你還有其它想法，歡迎大家在評論處告訴我哦。

github-JChehe。