CSS 흐름이 이미지 주위에 텍스트 흐름 트링 이미지

Question

주위에 텍스트를 정당화 :

HTML

<div> 
    <span id="photo"><img src="photo.png"</span> 
    <span id="text">Lorem Ipsum, blah, blah, blah ...</span> 
</div> 

CSS

#photo {float:left;margin:0px 8px 5px 0px;} 
#text {text-align:justify;}** 

텍스트가 이미지 주위에 흐르고 있지만, 그것은 정당화되지 않는다 (정렬이 남음). 텍스트 요소를 왼쪽으로 띄우면 정렬이 정확합니다 (원하는대로 정렬 할 수 있음). 그러나 텍스트가 이미지 주위로 흐르지 않고 이미지 아래로 흐릅니다. 어떻게 해결할 수 있습니까?

Answer 1

text-align 속성은 실제로 inline 요소가 아닌 둘러싼 블록 요소에 속합니다. 그래서 바깥 쪽 블록으로 이동 :

div { text-align: justify; } 

이 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification의 16.2 Alignment: the 'text-align' property를 참조하십시오

는

이 속성은 블록의 인라인 내용이을 정렬하는 방법에 대해 설명합니다.

(강조는 추가)

Answer 2

이미지를 스팬 밖으로 가져 오거나 왼쪽 스팬을 플로팅해야합니다.