div 문제 왜 줄 바꿈이 삽입 되었습니까?

300px x 300px 인 이미지 하나를 표시하고 텍스트를 표시하고 싶습니다. 불행히도 내가 표시하고자하는 텍스트는 이미지 다음 줄에 표시됩니다. 다음은 베어 코드입니다. -div 문제 왜 줄 바꿈이 삽입 되었습니까?

<html> 
    <body> 
     <div> 
      <div style="display:inline;"><img alt="a.jpg" src = "a.jpg"/></div> 
      <div style="display:inline;">some text which is too long probably a big paragraph</div> 

     </div> 
    </body> 
</html>

원활한 흐름 레이아웃으로 모든 것을 표시하는 방법은 무엇입니까?

출처

2010-11-27 TCM

<div> 
    <img> text 
</div>

: 사전에

덕분에 그냥 이미지를 떠.

div { overflow:auto; } 
img { float:left; }

출처

2010-11-27 13:35:21

즉이 경우 사업부에 적용 텍스트가 이미지를 건드리지 않습니다. – neurolabs

@neurolabs 예, 이미지에 테두리를 추가하여 흰색 배경의 이미지 일 경우 (그리고 주변 배경도 흰색 인 경우) 치수를 명확하게 구분할 수 있습니다. –

나는 플로트 제안이 정확하다고 생각하지만 당신은 아마 그래서 이미지에 약간의 여백 - 오른쪽 여백 하단을 추가해야

물론

<div style="display:inline;overflow:auto;float:left;"> 
    <img alt="a.jpg" src = "VC.JPG"/> 
</div>

출처

2010-11-27 13:44:37

@ 엘 Ronnoco 당신은 틀렸어. 'overflow : auto' 규칙은 float 요소의 ** parent **에 적용되어야합니다. 또한 컨테이너 DIV 안에 이미지를 래핑 할 필요가 없습니다. –

@ Šime 저를 위해 일합니다. 필자는 예를 들어 OP의 기존 코드를 가능한 한 가깝게 일치시키기 위해 'div'및 기타 스타일 규칙을 유지했습니다. –

@El Ronnoco 떠 다니는 요소는 자동 블록이므로'display : inline' 규칙은 무시됩니다. 'overflow : auto' 규칙은 IMG 요소가 부유하지 않기 때문에 아무런 목적이 없습니다. –

div 문제 왜 줄 바꿈이 삽입 되었습니까?

답변

관련 문제