正确的方法顶部对齐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

我不会使用内联块，我会将它们都浮在左边。