Question

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

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

如何让文字跨越身体的长度？

Answer 1

<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几乎不可能与之合作（祝客户好运）。

表中的标题文本无效

1 个答案: