將圖像注入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 jsfiddle，但沒有CSS。 http://jsfiddle.net/hamish/hvqMV/

[UPDATE] 我已經添加了一個圖像，可能有助於瞭解我想要達到的目標。想象一下紅色矩形是圖像，綠色是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>