css - 顶部对齐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

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