CSS를 사용하여 가로로 나란히 정렬하려면 어떻게해야합니까?

Question

아래에 표시 할 때 '여기에 일부 텍스트가 있습니다'라는 텍스트가 이미지 아래에 있습니다 - 이미지의 오른쪽에 표시하고 싶습니까?

<div style="width:50px;"> 
    <img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /> 
</div> 

<div style="width:150px;"> 
    <h2>Here is some text</h2> 
</div> 

Answer 1

<div style="width:50px; display: inline-block;"> 
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /> 
</div> 

<div style="width:150px; display: inline-block"> 
    <h2>Here is some text</h2> 
</div> 

변경된 플로트 : 인라인 블록 : 디스플레이 왼쪽. 이는 문서 플로우에서 항목을 제거하지 않기 때문에 더 나은 솔루션입니다. 각 너비에 대한 너비를 지정했는지 확인하십시오.

Answer 2

<div style="float: left; margin-right: 10px;"> 
    <img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /> 
</div> 
<div style="width: 300px;"> 
    <h2>Here is some text</h2> 
</div> 
<br style="clear: both;" /> 

이렇게하면됩니다.