浮动图像周围的文本，位于：右下角

Question

Im searching for a way, to float text around an bottom-right positioned image.

Here my not working version http://jsfiddle.net/xaqyb/

<div id="box">
<img width="120" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</div>

#box { 
    width: 250px; 
    min-height: 150px; 
    position: relative; 
    border: 1px solid #ccc; 
   background: #f7f7f7; 
    padding: 10px; 
}

#box img {
    display: block; 
    float: right; 
}

Any Ideas?

Answer 1

u can use span into p tag and then put img into span for example :

<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span>
<img width="100px" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
</span> no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

and this css style is

#wrapper { width: 250px; min-height: 150px; border: 1px solid #ccc;background:#f7f7f7; padding: 10px }
#wrapper img { display: block}
#wrapper span{display: block;float: right;}