如何在不使用 Outlook 电子邮件的边距、填充和位置的情况下设计模板答案

【问题标题】：how to design a template without using margins, padding, position for a outlook email如何在不使用 Outlook 电子邮件的边距、填充和位置的情况下设计模板
【发布时间】：2016-08-31 10:01:17
【问题描述】：

我必须为 Microsoft Outlook 电子邮件设计一个模板，该模板需要我将来自服务器的动态图像和文本放置在现有的静态背景图像上。我尝试使用 div 和 table 来设计它，并且还为 html 提供了内联 css 和 (!important)。我找不到对边距、浮动、位置等标签的支持，而且我的布局总是中断。我发现 Outlook 电子邮件不支持那些 CSS 属性。请建议我一种在没有布局中断的情况下设计模板的方法。

this is how my template should look.

http://templates.mailchimp.com/resources/email-client-css-support/ 以上链接

我尝试了两种不同的方式来对齐它们：

using div:
    <div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" ">
                            <h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div>
                        <h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3>
                        <img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;
                                        width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png">

     using table:
 <tr>
                    <td>
                        <img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg">
                    </td>
                    <td align="center">
                        <span style="margin-left: -1458px;">
                            <img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" ">
                            <span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span>
                        </span>
                    </td>
                    <td align="center">
                        <span style="margin-left: -1253px;">
                            <img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" ">
                        </span>
                    </td>
                    <td>
                        <h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">
                            <strong>Some text</strong>
                            </h2>
                        <h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3>
                    </td>
                </tr>

【问题讨论】：

请发布一些代码，以向我们展示您到目前为止所做的尝试。 SO 不是编码服务。
嗨，请使用它的表结构html。兼容所有邮箱。
@Kiran Khatri -table background url:(image) 也不起作用。还有其他方法可以将图像添加为表格背景吗？上面的链接显示了 Outlook 支持的 CSS 属性。

标签： html css outlook

【解决方案1】：

表格通常适用于 Outlook 电子邮件，但如果不是，例如，如果您想获得 40 像素的边距，请在该位置添加 40 像素的透明图像。

【讨论】：

谢谢。我需要将一张图片定位在另一张图片上。使用透明图像给了我边距。请建议我一种将一张图像放在另一张图像上的方法。