CSS : 한 줄에 오른쪽 이미지와 텍스트, 흐름 텍스트가 없습니까?

Question

해당 이미지의 오른쪽에 텍스트가있는 이미지를 표시하려고합니다. 이것은 모두 한 줄에 있고 더 많은 텍스트 안에 있어야합니다. 나는 나머지 텍스트가 이미지 주위를 흐르지 않게하고 싶다.

예 :

일부 텍스트 ... LOREM의 Ipsum 제품의 슬픔은, AMET 앉아 consetetur sadipscing elitr, SED DIAM nonumy eirmod tempor invidunt 유타 labore 등 dolore 마그나 aliquyam erat, 나오지도 DIAM의 voluptua.

내 이미지 및

일부 더 많은 텍스트 ... LOREM의 Ipsum 제품의 슬픔은 AMET 앉아 내 텍스트, consetetur sadipscing elitr, SED DIAM nonumy eirmod tempor invidunt 유타 labore 등 dolore 마그나 aliquyam erat, 나오지도 DIAM voluptua .

이미지 주위의 텍스트가 흐르지 않게하고 싶습니다. 나는 플로트를 시도했다 : 왼쪽으로 정렬하는 이미지에 남겨 뒀지 만, 일부 텍스트 만이 그 옆으로 간다고하는 방법을 모른다.

어떤 도움이 필요합니까?

감사합니다. http://jsfiddle.net/2BJ7J/

은 기본적으로 당신이 컨테이너 왼쪽에 이미지와 텍스트를 떠있어 :

Answer 1

여기에 그것을 할 수있는 하나의 방법입니다.

.container { 
    width:480px; 
    padding:20px; 
    border:1px solid #ccc; 
    overflow:auto; 
} 
.container img { 
    float:left; 
    width:260px; 
    margin:0 20px 0 0; 
} 
.container .text { 
    float:left; 
    width:200px; 
} 



<div class="container"> 
    <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" /> 
    <div class="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis, lorem eget pulvinar faucibus, diam tortor dapibus sapien, a egestas massa arcu ac risus. Ut tempor condimentum tincidunt. Donec vehicula, dui ornare ornare mollis, arcu nibh interdum ipsum, eu condimentum enim nunc id enim 
    </div> 
</div> 

Answer 2

CSS

p { line-height:1.5; outline:1px dashed green } 

.left-img span { /* span would be `img` in your project */ 
    float:left; 
    margin-right:1em; 
    /* BEG not needed for image */ 
    background-color:gray; 
    width:20px; 
    height:200px; 
    outline:1px dotted; 
    /* END not needed for image */ 
} 

.left-img + p { clear:left; } 
​ 

HTML

<p>Lorem ipsum ....</p> 
<p class="left-img"><span></span>More text</p> 
<!-- Replace <span></span> with <img> 
---- working code would be: 
---- <p class="left-img"><img src="...">More text</p> 
--> 
<p>Lorem ipsum ....</p> 
​ 

당신의 마크 업의 의미를보고 자연의 문서 흐름을 활용. 위의 CSS 마지막 줄은 키입니다. "<p> 다음에 left-img 클래스가 있으면 정상적인 문서 흐름으로 돌아 가야합니다."

바이올린 :