38

我想要这个布局，我有一个矩形框。左边的方框内有一个文本，右边有一个图像。这在浏览器中看起来不错，但是当作为 html 电子邮件发送时，在 Outlook 中浮动右侧似乎不起作用。它将图像放在文本下方的下一行。关于如何使这项工作的任何想法？（我试图避免使用表格。）

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>
4

7 回答 7

23

谈话很晚，但这里是如何在 html 电子邮件中“浮动”，align=""而不是使用。

这里的例子

此外，如果您正在寻找关于 html 电子邮件的资源（我假设您是因为您标记为正确的答案非常笼统），这里有一个巨大的资源列表。

于 2014-02-17T04:02:06.930 回答
12

这是 Mail Chimp 关于 HTML 电子邮件编码的一个非常好的指南：

http://kb.mailchimp.com/article/how-to-code-html-emails

一些基本提示：

  • 使用表格进行布局。
  • 将最宽的表格设置为最大 600 像素宽。
  • 不要尝试使用 JavaScript 或 Flash
  • 不要在样式标签中使用 CSS，因为某些邮件客户端会丢弃它。
  • 仅使用内联 CSS 样式。

基本上将您的电子邮件编码为大约 2003 年。

于 2013-03-12T17:23:18.480 回答
6

CampaignMonitor 为跨多个电子邮件客户端的所有 CSS 支持提供了这个相当出色的指南，也可以作为pdf或xls下载。

正如上面的答案所说，对 CSS 的电子邮件支持非常有限，主要是由于微软决定使用 Word 作为其 html 渲染引擎。

于 2013-11-27T08:43:08.293 回答
5

简单的浮动图像可以像

<img src="yourimage" align="left" />

但是这样一来，文本和图像之间的填充将不会获得可靠的结果，Outlook 会删除边距和填充，并且您的文本将紧贴图像。所以试试这个：

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

您需要在其周围包裹一个“表格”元素，以使填充边距效果在 Gmail、Outlook（在线）、Microsoft Outlook（桌面客户端）...

给表格一个 align=left 或 right 属性。（在这里编辑答案：此外，其他电子邮件客户端的后备和后备也给表格一个浮动值，所以两者都这样做。它们是彼此的备份。一些客户理解“浮动”，其他人理解“对齐”，一些人都理解， ...）您的表格将像图像一样漂浮在文本中。唯一的区别是，在 Outlook 中，表格会在文本中生成自动换行符，其中左对齐或右对齐的图像不会生成换行符。

为了设置边距，因为我们现在正在处理一个表格，所以在图像单元格的左侧或右侧添加一个宽度为“15”的额外“td”，并在其中添加一个不间断空格。（或透明的 gif -> spacer.gif）

&nbsp;

您最好不要将单元格留空，否则某些电子邮件客户端将不会考虑单元格的宽度

对于上边距和下边距，我们可以使用“vspace”属性，不要忘记给图像一个 align = left 或 right 属性。否则，'vspace' 将不起作用。

于 2016-02-04T22:03:27.240 回答
3

我找到了一种在 Outlook.com 上应用浮动的方法。
只需将标签大写，例如Float:left。

<span style="Float:left;">Content to float</span>

也许你也应该使用!important ;
我测试了它并且它有效。

于 2016-02-18T01:32:35.327 回答
2

查看https://www.campaignmonitor.com/css/此处列出了电子邮件中支持和不支持的所有内容

您可以使用外部表格代替浮动，并将想要浮动的内容放在外部表格的左侧 td 中。

这不是一个优雅的答案，但我是这样做的

于 2014-07-11T10:05:41.677 回答
0

当您将某物浮动到某物的右侧时，右浮动元素应始终首先出现在代码中。像这样：

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>
于 2015-11-18T14:37:56.103 回答