CSS Wrapping text around images

Question

for this website I've been building I need to display the content a certain way, I have a thumbnail, two screenshots and a block of text about 500 words. I need to have the text wrapping around my thumbnail and screenshots. Currently I'm using PHP substring to break up the content of words and display them where I need it but this isn't working as text displays different on every browser I need a fluid solution, you can see an example of the page I'm talking about HERE , I need the images to stay like that but the text to wrap around the images instead of having weird spacing where there should be more word. Thanks for any help in advance!

Answer 1

Simply floating the images will do the trick. Here is an example: http://jsfiddle.net/agrublev/a5RJN/

<img src="xx.jpg" style="float:left;">

Answer 2

您可以尝试将align =“ left”赋予将包含在p中的图像。

<img src="#" align="left" style="margin-right:10px;">

Answer 3

If you know the size (width, height) of the space where you want to put the words with a hole in it (the picture), you could generate an SVG. Advantages: it works in all the browser and you have the freedom of putting your words as you like (you can even rotate them).

And of course, you can use the generated SVG as a widget.

Answer 4

I found a code example that might be of some use to you. Of course using the position attribute won't help as words won't wrap around it. But maybe wrapping the image in a div and using margin like so can help.

http://codepen.io/atomworks/pen/algcz