Html 如何防止outlook破坏div大小？（通讯）
我正在用mailchimp制作一份时事通讯，我的outlook出现了问题，它一直在干扰我的两个专栏，如图所示： 以下是此部分的代码：Html 如何防止outlook破坏div大小？（通讯）,html,css,outlook,mailchimp,newsletter,Html,Css,Outlook,Mailchimp,Newsletter,我正在用mailchimp制作一份时事通讯，我的outlook出现了问题，它一直在干扰我的两个专栏，如图所示： 以下是此部分的代码： <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="fdvpeat" mc:variant="Two column block - With images"> <tr>
<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>
<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;">
行星快车
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益
各位好消息！
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益
<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>
<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;">
在这个问题上。。。
-
-
-
-
-
-
谢谢大家的帮助。我尝试过我的东西，但作为一个初学者，我就是不知怎么搞不好。对于这两个专栏，问题是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>
行星快车
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益，我们的共同利益
各位好消息！
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。这是一个很好的例子