Html 对齐不同高度的浮动元素

我有几个div

.photo\u box

，其中包含一个div

.photo\u stats\u title

，其中包含一些文本。当文本开始占据超过一行时，其父div

.photo\u box

的高度会发生变化。这会导致各种

.photo\u框

div按其底部对齐

问题：我们如何让它们在顶部对齐？最好不使用jQuery/Javascript

JSfiddle:

---

使用

显示：内联块和
垂直对齐：顶部
对齐这些

.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;
}


此外，如果您需要对一些旧浏览器的支持，请查看此项以获得一些修复
将“位置：绝对”；添加到CSS中的.photo_stats_标题

根据答案，您是否打算在照片下方显示任何内容？是的，将有一行父div。。。每行4个
。照片盒
。使用
垂直对齐：top
效果很好