4

我有几个 div .photo_box，其中包含一个.photo_stats_title包含一些文本的 div。当文本开始占用超过 1 行时，其父 div 的高度会.photo_box发生变化。这会导致各种.photo_boxdiv 按其底部对齐。

问题：我们怎样才能让它们在顶部对齐？最好不使用 jQuery/Javascript

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

在此处输入图像描述

4

2 回答 2

5

使用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/

于 2012-07-16T15:08:39.480 回答
0

添加“位置：绝对；” 到 CSS 中的 .photo_stats_title 。

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

于 2012-07-16T15:10:50.103 回答