在图片周围包裹文字（不浮动）

Question

I'm making an email template where I would like to wrap text around an image, but I can't use float because it doesn't work in Outlook 2007 and various other email clients.

[       ] Lorem ipsum test text blah
[  IMG  ] Lorem ipsum test text blah
[       ] Lorem ipsum test text blah
Lorem ipsum test text blah Lorem ipsum
Lorem ipsum test text blah.

I'd like to achieve that layout without floats.

Here is what I have with floats: http://jsfiddle.net/zYyza/

Answer 1

Here you go mate.

Just put align: left on the img tag in the HTML. http://jsfiddle.net/zYyza/2/

HTML:

    <a href="http://www.cleanwaterstore.com/FE008960-p-mangox-iron-filters.html"><img align="left" src="https://cleanwater.infusionsoft.com/jspServ/imagegetter.jsp?url=http://cws-intranet.net/Drawings/mangox-iron-filter.png" style="width: 80px" class="img_floats" /></a>
    <a style="clear:left;" href="http://www.cleanwaterstore.com/FE008960-p-mangox-iron-filters.html"><img class="info_button"  src="http://www.cleanwaterstore.com/images/products/More%20Info.gif"></img></a>

<p> <b>MangOX Iron Filter</b> 
    <br>
    <br>The MangOX Iron Filter is a powerful and effective system for removing iron and manganese from well water. This system automatically removes iron, manganese, and sediment without the use of filter cartridges or chemicals. The iron filter is easy to install by any plumber or person familiar with basic plumbing.
    <br>
    <br>The MangOX Iron Filter removes both dissolved and oxidized iron and manganese by using a special type of solid manganese oxide media which traps the iron and then automatically backwashes out the trapped rust and sediment to drain.
    <br>
    <br>The backwash lasts for approximately 15 minutes and takes place automatically, typically every 2 - 3 days, in the middle of the night when no water is being used.
    <br>
    <br>An optional chlorine solution tank is available to backwash the MangOX filter media with a chlorine rinse, which kills iron bacteria and can extend the life of the MangOX media for many years. For waters containing “rotten-egg odors” (hydrogen sulfide), a chlorine feed ahead of the MangOX filter can be used to kill the odor and keep the MangOX media working great.
    <br>
    <br>Unlike many residential and small commercial iron filters, the MangOX 7000 system will not restrict flow rate or cut down on water pressure in the home. The system uses a high quality Vortech filter tank which requires less backwash water, saving water and energy.
    <br>
    <br>Unlike the media inside the Greensand and Birm iron filters which often must be changed every 3 to 5 years, the MangOX media lasts for more than 10 years.</p>

CSS:

    .info_button {
        width: 91px;
        height: 34px;
        margin-top: 15px;
        padding-right: 25px;
        font-family: tahoma;
    }
    .img_floats {
        padding-right: 25px;
    }

Answer 2

The answer is really simple!

All you have to do is to use use flexbox like so, <p class="display: flex;"> and you're done!!! Really! It is that simple.

Now, for mobile devices, you need to add a few tweaks to the code:

FIDDLE

<style>
.I-hate-floats { display: flex; }
.I-hate-floats img { max-height: 200px; }

@media only screen and (max-width: 400px) {
  .I-hate-floats, .I-hate-floats>img  { display: block; }
}
<style>


<p class="I-hate-floats">
   <img src="http://placehold.it/200x200/E8117F/000/">
   Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem 
</p>

<p class="I-hate-floats">
   <img src="http://placehold.it/200x200/E8117F/000/">
   Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem 
</p>

<p class="I-hate-floats">
   <img src="http://placehold.it/200x200/E8117F/000/">
   Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem 
</p>

<p>
Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem Ipsum lorem ipsum lorem 
</p>