响应迅速的电子邮件部分Outlook问题

Question

在为客户构建新闻通讯3天后，我遇到了一个问题。我在左侧制作了一个带有一个图像的部分，右侧有一些文字。这就是

的样子

这是代码：

    <div class="column narrow" style="text-align: left; color:
        #430861; font-size: 16px; line-height: 24px; font-family: Open
        Sans,sans-serif; Float: left; max-width: 320px; min-width: 200px; width:
        320px; width: calc(72200px - 12000%)">
        <div style="font-size: 12px; font-style: normal; font-weight:
        normal" align="center">
            <img class="gnd-corner-image gnd-corner-image-center
        gnd-corner-image-top gnd-corner-image-bottom" style="border: 0; display:
        block; height: auto; width: 100%; max-width: 397px" width="200"
                 src="http://i1.cmail20.com/ei/j/66/2D8/3C7/174211/temp_import/csfinal/AfbeeldingenVCCmailing-05.jpg">
        </div>
    </div>
    <div class="column wide" style="text-align: left; color:
        #430861; font-size: 16px; line-height: 24px; font-family: Open
        Sans,sans-serif; Float: left; max-width: 400px; min-width: 320px; width:
        320px; width: calc(8000% - 47600px)">
        <div style="Margin-left: 20px; Margin-right: 20px;
        Margin-top: 12px">
            <div style="line-height: 4px; font-size: 1px">&nbsp;</div>
        </div>
        <div style="Margin-left: 20px; Margin-right: 20px;
        Margin-bottom: 12px">
            <h2 class="size-16" style="Margin-top: 0; Margin-bottom: 0;
        font-style: normal; font-weight: normal; color: #430861; font-size:
        16px; line-height: 24px" lang="x-size-16"><span style="color:
        #ffffff"><strong>WE ARE ARRIVING SOON!</strong><br>
        Lashing + Securing will be fully available in<br>
        Q4&nbsp;2017</span></h2>
        </div>

    </div>
</div>

除Nexus 5和在Outlook（所有版本，桌面和Web）上很糟糕

有人知道如何解决这个问题和Nexus 5？

更多信息：

• 宽度必须为600px。
• 图像应在左侧，文字在右侧。

我非常感谢您的帮助。

Answer 1

首先，对于新闻通讯，请使用<table>，<tr>和<td>，如果您不这样做，您将在许多设备/WebMail等上遇到很多问题。的确，确实，大多数电子邮件必须为600px，您也可以使用该宽度来避免一些问题。

第二，不要使用类，更喜欢纯内线CSS，例如： style="font-size:16px;"

第三，我认为，您应该检查Litmus和EmailOnacid网站和论坛（当然还有Stackoverflow），也许您应该尝试EmailOnacid Mail Tester Tester工具。我在公司里得到了它，这真的很有用！

最后，这是您可以使用的代码的（非常简短的）示例，它是我使用的模板的一部分：https：//jsfiddle.net/6tq8ufdr/

<table bgcolor="#fff" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
    <tbody>
        <tr>
            <td align="center" bgcolor="#ebf9ff">
                <table cellpadding="0" cellspacing="0" border="0">
                    <tbody>                                    
                        <tr bgcolor="#ffffff">
                            <td height="200" width="600">
                                <table cellpadding="0" cellspacing="0" border="0">
                                    <tbody>
                                        <tr>
                                            <td height="200" width="200" valign="middle" align="center" style="height:200px;">
                                                <img style="display:block;" src="http://del.h-cdn.co/assets/cm/15/10/54f682bbc4bc5_-_cooked-bacon-de-cp.jpg"  alt="bacon"/>
                                            </td>
                                            <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too)
                                            <td height="200" width="370" valign="middle" align="left" style="height:200px;">                            <p>Ut sagittis nulla at arcu pretium maximus. Morbi ut turpis tincidunt, scelerisque massa eget, rutrum lectus. Aenean sed ullamcorper leo. Quisque lacus dolor, tristique id mollis pellentesque, tempus ut augue. Cras mauris ipsum, molestie sit amet eros vel, tempus rutrum odio. Pellentesque consectetur quam non nisl vulputate euismod. Integer quis magna nec urna malesuada efficitur.</p>
                                            </td>
                                            <td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too)
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>                                                                                         
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

不要忘记 <head>等。