响应式电子邮件部分 Outlook 问题

Question

在为客户构建时事通讯 3 天后，我遇到了一个问题。我做了一个部分，左边是一张图片，右边是一些文字。 This is what it looks like

这是代码：

    <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 和它是 terrible 在 Outlook 上（所有版本，桌面版和网络版）

有谁知道如何为 Outlook 和 Nexus 5 解决这个问题？

更多信息：

宽度必须为 600px。
图片应该在左边，文字在右边。

非常感谢你的帮助。

Answer 1

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

其次，不要使用 class，更喜欢纯内联 CSS，例如：style="font-size:16px;"

第三，在我看来，您应该查看 Litmus 和 EmailOnAcid 网站和论坛（当然还有 Whosebug），也许您应该尝试使用 EmailOnAcid 邮件测试工具。我在公司搞到的，真的好用！

最后，这是您可以使用的代码示例（非常短），它是我使用的模板的一部分：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> 等等

响应式电子邮件部分 Outlook 问题

Responsive email section Outlook issue

html

css

email

responsive

newsletter