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

Question

我正在寻找一种方法，在右下角的图像周围浮动文字。

这是我的工作版本 http://jsfiddle.net/xaqyb/

HTML 的

<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>

CSS

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

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

任何想法？

Answer 1

你可以使用span进入p标签，然后将图像放入span中，例如：

<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>

这个css样式是

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