将图像注入html

Question

有没有办法将一些图像放入一个html文本块中，文本会在图像周围流动而不会在与文本相同的html块中定义图像？

我想象的是：

<span class="body_content">
<p>Lorem ipsum dolor sit amet...</p>
<p>Donec a nunc eget ipsum euismod...</p>
<p>Curabitur eu rutrum massa. Mauris...</p> 
</span>

<span class="images">
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
</span>

还有一些CSS魔术可以合并它们。

我有一个CMS系统，允许用户输入简单的html（使用富文本编辑器，目前是tinyMCE）和一系列与文本相关的照片。

在线观看时，文字会与照片分开显示，但是在打印时，我希望将文字显示在文字中。我希望第一张照片在右边，文字在它周围流动，几行文字，然后是左边的下一张照片，再多几行，然后是右边的另一张图片。

我可以解析用户提供的html并在段落之间注入<img ..>标签，但我很想知道是否有更好的方法可以使用CSS。请注意，我可以完全控制img标签，我知道图像的尺寸。这只是我无法控制的body_content hmtl。

我已经开始使用一些基本的html，但没有CSS。 http://jsfiddle.net/hamish/hvqMV/

[UPDATE] 我添加了一个图像，可能有助于理解我想要实现的目标。想象一下，红色矩形是图像，绿色是围绕它流动的body_content。

Answer 1

以简单的方式，您可以使用应用于float:left;标记的CSS img属性来实现它，如下例所示，只显示一个段落（在实际页面中，最好定义CSS类而不是使用内联样式）：

<p>
<img src="http://www.hillspet.com.au/images/en-us/img_puppy_DryNose.jpg" style="float:left; margin: 10px 10px 10px 0px;" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec tortor dolor. Phasellus gravida, leo ac mollis vestibulum, sapien odio eleifend purus, eu dapibus lacus dui ut ligula. Nulla felis ante, tempus in interdum vitae, condimentum quis lacus. Integer congue diam vitae justo bibendum luctus. Integer vestibulum pulvinar est, lacinia mattis nisl congue vel. Nullam ut augue justo, nec volutpat mi. Vestibulum fermentum elit sit amet sapien consequat fermentum. Pellentesque non risus sollicitudin tortor fringilla vehicula. Nulla convallis dictum tellus pulvinar fermentum. Maecenas congue luctus justo, at faucibus mi volutpat ut. Proin venenatis posuere odio accumsan auctor. Praesent tellus eros, tempus et pellentesque non, tempus vel orci.
</p>