我正在用mailchimp制作时事通讯,而我在Outlook中遇到了这个问题,它一直困扰着我的两列,如下图所示:

html - 如何防止Outlook破坏div大小? (通讯)-LMLPHP

这是此部分的代码:

<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居中也很麻烦:

html - 如何防止Outlook破坏div大小? (通讯)-LMLPHP

这是此部分的示例:

<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>


对于TOC-我认为样式表中有些样式是我们看不到的,如果可以的话,它会有所帮助。不过我的猜测是,LI或UL元素在样式表中分配有边距或内边距,而Outlook不喜欢这样做,因此使子弹发疯。

关于html - 如何防止Outlook破坏div大小? (通讯),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32280401/

10-10 18:45
查看更多