1

设置：

 <table width="600" >
    <tr>
        <td width="400" rowspan="2" valign="top">
            With very long content here*
        </td>
        <td width="200" valign="top">
            Top-aligned content
        </td>
    </tr>
    <tr>
      <td valign="bottom">
          *Bottom-aligned content loses vertical alignment
             and appears as if valign="middle"              
       </td>
    </tr>
 </table>

示例代码在 jsfiddle 中，因为它太长（触发错误需要大量内容）。

所以看看这些：

http://jsfiddle.net/webhelpla/XZyg2/作为电子邮件发送看起来不错

http://jsfiddle.net/webhelpla/XZyg2/1/作为电子邮件发送：底部对齐的内容不再是底部对齐。

对此有任何解决方法的想法和经验吗？

4

3 回答 3

0

也尝试添加vertical-align:bottom;，

  <td valign="bottom" style='vertical-align:bottom;' >
      *Bottom-aligned content loses vertical alignment
         and appears as if valign="middle"              
   </td>

试试这个小提琴。我rowspan=2从 td 中删除了，总是使用 cellpadding 代替它。

于 2012-10-04T18:02:36.970 回答
0

将 table-layout:fixed 添加到表格的 css 中，看看是否有帮助。Coder1984 在 td 中添加“style =”标签是正确的，因为一些电子邮件客户端在这方面做得更好......

无论如何，很难预测 html 电子邮件将如何在各种客户端中呈现。我在 acid 上使用电子邮件来检查各种客户端的渲染，从 webmail 通过电子邮件客户端到移动设备......

于 2012-10-04T20:39:03.510 回答
0

Outlook 的块内容超过一定大小（如果我没记错的话是 2300 像素）存在问题。您可以避免右侧行中的第三个单元格的问题：

 <table width="600" >
    <tr>
        <td width="400" rowspan="3" valign="top">
            With very long content here*
        </td>
        <!-- Add minimal heights to force the middle row to take the space -->
        <td width="200" valign="top" height="1">
            Top-aligned content
        </td>
    </tr>
    <tr><td style="page-break:always"><!-- Let's make a page break *here* --></td></tr>
    <tr>
      <td valign="bottom" height="1">
          *Bottom-aligned content loses vertical alignment
             and appears as if valign="middle"              
       </td>
    </tr>
 </table>
于 2012-10-04T21:47:55.250 回答