如何使用 Sendgrid 在 Outlook 中呈现模板？答案

【问题标题】：How can I have a template render in Outlook with Sendgrid?如何使用 Sendgrid 在 Outlook 中呈现模板？
【发布时间】：2020-03-12 11:38:43
【问题描述】：

我使用 sendGrid 为 @hotmail.com 帐户 创建了一个邮件模板，但是当我测试电子邮件时，我没有与设计相同的模板。这就是我所做的：

结果是：

我的 HTML 代码：

<td colspan="5" style="border-left: 20px solid pink;border-right: 20px pink solid ;padding : 0 30px; font-size:13px; padding-bottom : 20px">
    <div style="margin-top:20px; display : flex; font-size : 12px">
        <div style="background: pink; flex: 1; margin-right: 5px; width : 130px; height : 50px; text-align : center">
            <p style="margin : 0; margin-top : 10px">TEST</p>
            <p style="margin : 0">TEST</p>
        </div>
        <div style="width : 130px; height : 50px; text-align : center; background: pink; flex: 1; margin-right: 5px;">
            <p style="margin : 0; margin-top : 10px">TEST</p>
            <p style="margin : 0">TEST</p>
        </div>
        <div style="width : 240px; height : 50px; text-align : center; background: pink; flex: 2;line-height:50px;">
            TEST TEST TEST TEST TEST TEST TEST
        </div>
    </div>
</td>

【问题讨论】：

将父组件从TD切换到DIV并添加flex-direction: row和flex-wrap: wrap怎么样？
sendgrid 对 flex-direction 等与 flex 相关的属性支持不佳

标签： html outlook html-email sendgrid

【解决方案1】：

电子邮件软件相当落后。你会发现 flex 没有被广泛支持：https://www.caniemail.com/search/?s=flex

电子邮件的基本结构仍应（不幸地）使用默认显示（即不要将其更改为 flex）基于表格。查找表结构的“混合电子邮件”方法。

此外，要在手机中正确显示长表格，您需要记住大概 320 像素的最大宽度，因此 width:240px 参数不是很好。最好以百分比计算，或者重新计算表格。

【讨论】：