html - 在顶部对齐不同高度的div

Question

这是我的 HTML 标记:

<div class="awards-wrap">
    <div class="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum 2013</p>
    </div>
    <div class="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum 2013</p>
    </div>
</div>

这是我的CSS:

.awards-wrap {
    background: gray;
    margin: 0 auto;
    text-align: center;
}

.award {
    max-width: 250px;
    display: inline-block;
}

所以它们现在都居中对齐并且也是响应式的，但我希望图像都在顶部对齐。

我试过这样做:

.awards-wrap {
    background: gray;
    margin: 0 auto;
    text-align: center;
    display: table;
}

.award {
    max-width: 250px;
    display: table-cell;
}

但它消除了响应能力并在中心对齐。我知道我可以对它使用媒体查询，但我只想像它在 inline-block 上的行为那样做。

这是 jsfiddle为之

Answer 1

您可以为此使用vertical-align 属性并将其设置为top。它也会将 div 对齐到顶部和中心。这是更新后的 CSS:

.award {
 max-width: 250px;
 display: inline-block;
 vertical-align:top;
}

这是一个link更新后的 JSFiddle