텍스트와 이미지가 나란히 정렬

Question

다음과 같은 효과를 얻고 싶습니다. 다음과 같은 스타일로

<div class="header"> 
     <div class="pictureFrame"> 
      <img class="picture" src="photo.jpg"/> 
     </div> 
     <div class="position"> 
      text 
     </div> 
</div> 

<div class="separator"></div> 

:

.pictureFrame 
{ 
width: 150px; 
float: right; 
} 

.position 
{ 
vertical-align: bottom; 
} 

.separator 
{ 
clear: both; 
} 

그러나 수직 정렬, 내가 얻을 즉, 작동하지 않는 것

  ----- 
     -img- 
     ----- 
--text-- ----- 
-------- ----- 

는 지금, 나는 다음과 같은 코드가 있습니다 다음,

--text-- ----- 
-------- ----- 
     ----- 
     -img- 
     ----- 

원하는 효과를 얻는 방법? 질문이 너무 쉬운 경우 사과드립니다.

Answer 1

사용 위치 : 상대적; on .header 및 위치 : 절대; * 하단 : 0; * on div.position;

또한 div.position에 높이를 지정해야 할 수도 있습니다.

Answer 2

왼쪽에 위치 속성이 있습니다.

문제를 해결해야합니다.

Answer 3

Verical-align 속성은 인라인 및 표 셀 요소에만 적용됩니다.

이 작업을 수행하려면 배치 div를 제거하거나 디스플레이 인라인으로 정의하십시오. 그러나 float은 인라인 요소에서 작동하지 않으므로 텍스트를 따라 이미지를 만들려면 html로 뒤집어 써야합니다.

가짜 표 셀을 만들어 브라우저를 속여서 세로 정렬 할 수도 있습니다. 이를 위해서는 부모 요소가 테이블로 표시되어야합니다.