html - 将图像注入(inject)html

Question

有没有一种方法可以将多个图像放入一个 html 文本 block 中，让文本围绕图像流动，而无需将图像定义在与文本相同的 html block 中？

我在想像这样的事情:

<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 并注入(inject) <img ..>段落之间的标记，但我很想知道是否有更好的方法使用 CSS 来解决这个问题。请注意，我可以完全控制 img 标签，而且我知道图像的尺寸。这只是我无法控制的 body_content hmtl。

我用一些基本的 html 开始了一个 jsfiddle，但没有 css。 http://jsfiddle.net/hamish/hvqMV/

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

Answer 1

您可以通过将 CSS float:left; 属性应用于 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>