Css 上对齐div的正确方法

我用下面的方法将两张图片放在一起。图片大小不同（右边的比左边的高），但我希望它们在顶部对齐，而不是像现在这样在底部对齐

关于第二个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>

---

一种方法是浮动容器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在这种情况下，因为它是该元素的默认值。
我不会使用内联块，而是将它们都向左浮动