텍스트를 인라인으로 유지

이미지의 왼쪽에 떠있는 이미지가 있고 이미지의 오른쪽에 텍스트가 있습니다. 그러나 텍스트는 단 한 줄의 단락이 이미지 아래로 들어가기에 충분합니다. 이 텍스트를 단락과 인라인으로 유지하고 그림 주위를 감싸지 않게하려면 어떻게해야합니까? 이미지가 왼쪽으로 부유 경우텍스트를 인라인으로 유지

출처

2012-05-25 L84

마크를 게시하십시오 – bfavaretto

은 div 안에 들어있는 텍스트입니까? 둘 다 떠 다니는거야? 나는 그들이 아닌 것으로 의심한다. –

너비를 알고 걱정하지 않으려면 텍스트 컨테이너에 대해 establishing a new block formatting context을 입력하면됩니다. 마크 업에 대한

즉 :

<img src="image.jpg"> 
<p>Some text

당신이 <p> 요소를 "볼 수"이외의 오버 플로우를 제공한다 할 필요. 예를 들어 :

p { overflow:auto; }

이미지에서 텍스트를 분리하기 위해 <img>에 여백 오른쪽의 약간을 사용합니다.

출처

2012-05-26 00:36:41 Alohci

가장 쉬운 해결책. 감사 – L84

가, 트릭 이미지의 적어도 width의 margin-left 어떤 요소에 대한 것입니다 당신의 텍스트에 포함되어 있습니다. 예를 들어

, 당신의 HTML이 같은 경우 :

<img src="image.jpg"> 
<p>Some text

그리고 이미지의 폭이 160 픽셀이다, 당신은 당신의 단락 적어도 160 픽셀의 margin-left을 (당신이 160 픽셀보다 약간 더 큰 것을 그것을 margin-left을주는 경우가 더 좋은 모양 않음) 제공합니다.

이미지를 플로팅 한 후에 수행해야 할 작업은 그 다음에 오는 단락에 margin-left으로 설정하면됩니다. 단락의 너비를 지정할 필요조차 없습니다.

데모 http://dabblet.com/gist/2791183

출처

2012-05-25 23:34:53 Ana

당신은 float로 이미지 요소와 별도로 텍스트 요소가 필요합니다. 두 요소의 너비도 지정해야한다고 생각합니다.

<img src"url()" style="float:left; width:100px;"> 
<div id="text" style="float:left; width:500px;">Words</div>

출처

2012-05-25 23:36:23 Jimmy

다른 블록 요소에 텍스트를 배치하지 않으면 항상 다른 떠 다니는 요소를 둘러 쌀 것입니다. 수레가 작동하는 방식은 "문서 흐름"에서 요소를 가져 오는 것입니다 (here's some more specific information on how floats work). 텍스트를 줄 바꿈하지 않도록하는 유일한 방법은 블록 요소 (예 : div 태그) 안에 배치하고 왼쪽에 떠 다니는 이미지가있는 요소를 떠있게하는 것입니다.

예 :

<div style="overflow: auto;"> 
    <img src="hello.jpg" style="float: left; width: 200px;"> 
    <div style="float: left; width: 700px;"> 
     Hello!!! 
    </div> 
</div>

제 overflow: auto이 컨테이너의 높이를 선언한다. 이미지와 텍스트 div 아래의 div 태그에 clear: both을 추가하는 것과 같은 개념입니다. 항상 수레를 치우는 것을 잊지 마십시오! :)

출처

2012-05-25 23:39:37 cereallarceny

텍스트를 인라인으로 유지

답변

관련 문제