0

有没有办法将许多图像放入一个 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开始了一个jsfiddle，但没有css。 http://jsfiddle.net/hamish/hvqMV/

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

文本在图像之间流动

4

1 回答 1

1

In a simple way you can achieve it with CSS float:left; property applied to img tag, like the following example, showing just a single paragraph (in actual page it would be better to define CSS class instead of using inline style):

<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>
于 2013-05-11T13:55:31.393 回答