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

나는 인라인 블록을 사용하지 않을 것이다. 대신에 둘 다 떠 다니게 될 것이다.