html - 如何在不使用 outlook 电子邮件的边距、填充、位置的情况下设计模板

Question

我必须为 Microsoft Outlook 电子邮件设计一个模板，这需要我将来自服务器的动态图像和文本放置在现有的静态背景图像上。我尝试使用 div 和表格来设计它，还为 html 提供了内联 css 和 (!important)。我找不到对边距、 float 、位置等标签的支持，而且我的布局总是中断。我发现 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>  

Answer 1

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