对齐不同高度的浮动元素

Question

我有几个div .photo_box，其中包含div .photo_stats_title，其中包含一些文本。当文本开始占用多于1行时，其父div .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

添加“position：absolute;” CSS中的.photo_stats_title。

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