正確的方法頂部對齊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

我不會使用內聯塊，我會將它們都浮在左邊。