Question

我正在创建一个电子邮件模板，我想在图像周围包装文本，但我不能使用float，因为它在Outlook 2007和其他各种电子邮件客户端中不起作用。

[       ] 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.

我想在没有花车的情况下实现这种布局。

以下是我对浮动的内容：http://jsfiddle.net/zYyza/

Answer 1

你在这里交配。

只需将align: left放在HTML中的img标记上即可。 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

答案很简单！

您所要做的就是使用使用flexbox ，<p class="display: flex;"> 你已经完成了！真！就这么简单。

现在，对于移动设备，您需要对代码添加一些调整：

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

在图像周围包裹文字（没有浮动）

2 个答案:

答案很简单！