适当的方式来顶部对齐div

Question

我正在使用以下内容将两张图片放在一起。图片尺寸不同（右边的图片比左边的图片高）但是我希望它们在顶部对齐，而不是像目前那样对齐。

有关正确对齐第二个div的正确方法的建议吗？

由于

<div style="display: inline-block; margin-right: 10px">
<img src="right-side.jpg" alt="taller image">
</div>

<div style="display: inline-block; margin-right: 10px">
<img src="left-side.jpg" alt="shorter image">
</div>

Answer 1

一种方法是浮动容器div，如：

<div style="display:block; float: left; margin-right: 10px">
    <img src="right-side.jpg" alt="taller image" style="height: 150px;">
</div>

<div style="display:block; float:left; margin-right: 10px">
    <img src="left-side.jpg" alt="shorter image" style="height: 50px;">
</div>​

...在这种情况下你实际上不需要display: block;，因为它是该元素的默认值。

Answer 2

我不会使用内联块，而是将它们向左浮动。