Question

我必须为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>

Answer 1

表通常与Outlook电子邮件一起使用，但如果不是，如果您尝试获得40px的保证金，例如，在该位置添加40px透明图像。

如何设计模板而不使用边距，填充，Outlook电子邮件的位置

1 个答案: