对齐不同高度的浮动元素

Question

我有几个.photo_box包含div的div .photo_stats_title,它包含一些文本.当文本开始占用多于1行时,其父div的高度会.photo_box发生变化.这导致各种.photo_boxdiv通过它们的底部对齐.

问题:我们怎样才能让它们在顶部对齐？最好不要使用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/