0

我正在设计一个电子邮件模板，我在表格中有两个带有文本的图像。我想在表格中和图像上方放置一行文本。我能够做到这一点，但文本仅与左侧的图像对齐，并且不跨越两个图像的长度。这是我的代码：

                       <table border="0" cellpadding="0" cellspacing="0" mc:repeatable class="mobileTable">

                          <tr>
                               <div mc:repeatable  mc:edit="top_content">
                            <h1>This is the text</h1>
                          </div>
                          </tr>

                        <tr>

                              <td valign="top" width="33%">

                                <table border="0" cellpadding="0" cellspacing="0">

                                  <tr >
                                    <td valign="top" align="center">
                                      <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_110.gif" style="max-width:110px;" mc:label="image" mc:edit="tiwc150_image00" />
                                      <div mc:edit="tiwc150_content00">
                                        Repeatable content blocks:Repeatable sections 
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                              <td valign="top" width="33%">
                                <table border="0" cellpadding="0" cellspacing="0">
                                  <tr>
                                    <td valign="top" align="center">
                                      <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_110.gif" style="max-width:110px;" mc:label="image" mc:edit="tiwc150_image01" />
                                      <div mc:edit="tiwc150_content01">
                                        Repeatable content blocks: Repeatable sections 
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>

如何让文本跨越正文的长度？

4

1 回答 1

0 
<tr>
                <th width="100%">
                                    <div mc:repeatable  mc:edit="top_content">
                                    <h1>This is the text</h1>
                                 </div>
                </th>
                          </tr>

用上面的代码替换第一个表的行。它适用于IE7。

我有几个建议：

  • 尽可能使用<th>。我从未在电子邮件客户端中测试过它的使用，但我认为它与<td>
  • 尽可能考虑使用像素尺寸

仅供参考 - 我建议在 hotmail 和 gmail 客户端中进行大部分测试。雅虎对 CSS 有极好的支持，而 hotmail 做了一些疯狂的事情。Outlook 几乎无法使用（祝您好运）。

于 2013-06-17T18:35:26.857 回答