對齊不同高度的浮動元素

Question

我有一個div .photo_box，其中包含一個div .photo_stats_title，它包含一些文本。當文本開始佔用多於一行時，其父分區.photo_box的高度會發生變化。這會導致各個.photo_box div按其底部對齊。

問題：我們怎樣才能讓他們頂部排列？ 優選地不使用jQuery /使用Javascript

的jsfiddle：http://jsfiddle.net/ySbjQ/

Answer 1

使用display: inline-block;和vertical-align: top對準這些。

.photo_box { 
    background: #fff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    display: inline-block; 
    position: relative; 
    margin-bottom: 15px; 
    border: 1px solid #ddd; 
    vertical-align: top; 
} 

http://jsfiddle.net/ySbjQ/1/

另外，如果你需要一些舊的瀏覽器的支持，看看這個對於一些修復http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

加 「的立場：絕對的;」到CSS中的.photo_stats_title。

http://jsfiddle.net/ySbjQ/4/