對於多個元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法：
首先約定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應該也一樣。
如果你還有其它想法，歡迎大家在評論處告訴我哦。