CODEWITHSUNDEEP
htmlcsspositioning
Hamish Currie
Hamish Currie

Reputation: 501

Injecting images into html

Is there a way to place a number of images into a block of html text, having the text flow around the images without having the images defined within the same html block as the text?

I'm imagining something like:

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

And some CSS magic to merge them.

I have a CMS system that allows users to enter simple html (using a rich text editor, currently tinyMCE) and a series of photos that relate to the text.

When viewed online, the text is displayed separately from the photos, however when printed I want to have the photos shown in amongst the text. I'd like to have the first photo on the right with the text flowing around it, a few lines of text and then the next photo on the left, a few more lines then another image on the right again.

I could parse the user supplied html and inject the <img ..> tags in between paragraphs, but I'm interested to know if there is a better way to go about this using CSS. Note that I have full control over the img tags, and I do know the dimensions of the images. It's just the body_content hmtl that I don't have control over.

I've started a jsfiddle with some basic html, but no css. http://jsfiddle.net/hamish/hvqMV/

[UPDATE] I've added an image that may help understand what I'm trying to achieve. Imagine the red rectangles are images and the green is the body_content flowing around it.

Text Flowing between images

Upvotes: 0

Views: 1579

Answers (1)

Alexander Bell
Alexander Bell

Reputation: 7918

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>

Upvotes: 1

Related Questions