如何防止前景突破div大小？ （通讯）

Question

我正在使用mailchimp制作时事通讯，我遇到了Outlook的这个问题，它一直在搞乱我的两个栏目，如图所示：

以下是此部分的代码：

<table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="fdvpeat" mc:variant="Two column block - With images">
        <tr>
                                <td width="50%" align="left" valign="top" style="border-collapse: collapse !important;">
                                    <div class="leftcolumn" style="padding: 0 10px 0 0;" mc:edit="leftcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/ea2761e8-68e4-4ebc-b5ec-e0fe6227cfce.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Planet express</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                                <td width="50%" align="left" valign="top" style="border-collapse: collapse !important;">
                                    <div class="rightcolumn" style="padding: 0 0 0 10px;" mc:edit="rightcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/96456a30-0d44-4cc6-b689-bd92b97ea6d0.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Good news everyone!</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
    </table>

这也使TOS的中心陷入困境：

这是这部分的例子：

<tr>
                    <td align="left" valign="top" id="templateTOC" style="background-color: #969696;border-collapse: collapse !important;">
                        <div id="top"></div>
                        <h2 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #ffffff !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 21px;font-weight: bold;line-height: 129%;text-align: left;">In this issue...</h2>
                        <ul id="mctoc">
                            <li><a href="#mctoc1">Featured Research: Online Representation of the Arab World</a>
                            </li>
                            <li><a href="#mctoc2">Policy Impact</a>
                            </li>
                            <li><a href="#mctoc3">Staff News</a>
                            </li>
                            <li><a href="#mctoc4">Teaching News</a>
                            </li>
                            <li><a href="#mctoc5">Recent News</a>
                            </li>
                            <li><a href="#mctoc6">Forthcoming Events</a>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" style="border-collapse: collapse !important;">

谢谢大家的帮助。我尝试过我的东西，但作为一个初学者，我无法以某种方式做到这一点。

Answer 1

对于这两列，问题是Outlook忽略DIV上的填充。将DIV填充移动到TD并将其从50％减少到49％（这是我做的事情，因为一些电子邮件客户端喜欢自动添加边距等，可能会破坏设计。使用2％缓冲区，它会否定这一点在我能看到的所有展望中解决了这个问题。

<table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="fdvpeat" mc:variant="Two column block - With images">
        <tr>
                                <td width="49%" align="left" valign="top" style="padding: 0 10px 0 0; border-collapse: collapse !important;">
                                    <div class="leftcolumn" mc:edit="leftcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/ea2761e8-68e4-4ebc-b5ec-e0fe6227cfce.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Planet express</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                                <td width="49%" align="left" valign="top" style="padding: 0 0 0 10px; border-collapse: collapse !important;">
                                    <div class="rightcolumn" mc:edit="rightcolumn">
                                        <img src="https://gallery.mailchimp.com/32275150c7338039c53c72339/images/96456a30-0d44-4cc6-b689-bd92b97ea6d0.jpg" alt="" border="0" style="margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;display: block;margin-top: 10px;margin-bottom: 11px;width: 270px !important;min-width: 270px !important;max-width: 270px !important;height: 150px !important;min-height: 150px !important;max-height: 150px !important;" class="halfsize">
                                        <div>
                                            <h3 style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 0;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 16px;font-weight: bold;line-height: 131%;text-align: left;">Good news everyone!</h3>

                                            <p style="padding: 0;margin-top: 10px;margin-right: 0;margin-bottom: 11px;margin-left: 0;color: #222222 !important;display: block;font-family: 'Helvetica Neue', Helvetica, Arial, Helmet, Freesans, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: left;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
    </table>

对于TOC - 我觉得样式表中有一些我们没有看到的样式，如果你能提供它会有所帮助。我的猜测是，LI或UL元素在样式表中分配了边距或填充，Outlook不喜欢这样，所以它会让子弹变得疯狂。