HTML 电子邮件：顶部和底部对齐的内容

Question

问题

我正在处理包含项目列表的 HTML 电子邮件，考虑到电子邮件客户端的限制，我想知道下面的设计是否可行。

目前，我有一个包含两个单元格的每个项目的表格（我们称之为item-table）。第一个单元格 (info-cell) 高度可变，包含项目信息和链接。第二个单元格 (image-cell) 包含一个图像，并且高度也是可变的。这个问题与第一个单元格有关。

我有一个嵌套在info-cell 中的表格，有两行，每行有一个单元格。我们将这些单元格称为info-cell-top 和info-cell-bottom。

期望的结果

期望的结果是让info-cell-top 与info-cell 的顶部对齐，info-cell-bottom 与info-cell 的底部对齐，而不管item-table 的高度如何。

我尝试过的

由于这是电子邮件标记，我无法在 image-cell 上使用 rowspan="2" 来解决此问题。虽然它适用于某些桌面电子邮件客户端，但对于移动客户端，图像单元格会完全消失。

我还尝试使用height="100%" 和height="1" 将内表拉伸到info-cell 的全高。

这两种解决方案在浏览器中看起来都很好，但不适用于电子邮件。

代码

也可以在 jsfiddle 上玩。

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #bbbbbb;">
    <tbody>
        <tr>
            <td style="padding: 16px 0px; border-bottom: 1px solid #bbbbbb;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="1">
                    <tbody>
                        <tr>
                            <td style="vertical-align: top;">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
                                    <tbody>
                                        <tr>
                                            <td style="vertical-align: top;">
                                                <strong><a href="#" style="color: #000000; text-decoration: none;">Top aligned</a></strong>

                                                <br>Price
                                                <br>Size
                                                <br>
                                                <br>Wishlist comment - Phasellus sollicitudin consequat consectetur. Morbi a elit leo. Aliquam velit nibh, aliquet quis posuere at, vestibulum nec orci.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="vertical-align: bottom;">
                                                <br>
                                                <br> <strong><a href="#" style="color: #000000; text-decoration: none;">Bottom aligned</a>
                                        &nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">Add to cart</a>
                                        </strong>

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td width="120px" valign="bottom" style="padding-left: 16px;">
                                <div style="text-align: center; background: #ddd; height: 200px;padding: 30px 10px;box-sizing: border-box;"><b>Image with variable height</b>
                                    <br>
                                    <br>(may be shorter than left column)
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

请求

对于我可以做些什么来实现我想要的结果有什么建议吗？你能帮忙吗？

Answer 1

将 td 中的 CSS vertical-align:top; 替换为：<td valign="top">。

valign 接受 top|middle|bottom 值，而align（水平）接受 left|center|right。

对于这种布局，您还需要行跨度或固定高度，因为嵌套表格（您的 2 行文本）不会推到容器单元格的最大高度。

这是一个同时应用 valign 和 rowspan 的基本示例：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="400" height="200" valign="top" bgcolor="#EEEEEE">Align Top
    </td>
    <td width="200" rowspan="2" valign="middle" bgcolor="#777777">
      <img alt="image" src="" width="200" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="400" height="300" valign="bottom" bgcolor="#CCCCCC">Align Bottom
    </td>
  </tr>
</table>

它有助于在行跨单元格上设置高度，因为 Outlook 有时会猜测并弄乱您的行跨断点。更多关于 here 的信息（虽然它指的是 colspan，但同样适用）