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和Nexus 5外，每部手机都看起来不错它是Outlook上的terrible（所有版本，桌面和网络）

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

更多信息：

宽度必须为600px。
图像应位于左侧，文本应位于右侧。

我非常感谢你的帮助。

Answer 1

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

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

第三，在我看来，你应该检查Litmus和EmailOnAcid网站和论坛（当然还有Stackoverflow），也许你应该尝试使用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问题

1 个答案: