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

概述问题 我正在处理一个包含项目列表的HTML电子邮件,我想知道下面的设计是否可行,考虑到电子邮件客户端的限制. 目前,我有一个表格,每个项目有两个单元格(我们称之为item-table).第一个单元格(信息单元格)具有可变高度,包含项目信息和链接.第二个单元(图像单元)包含图像并且高度可变.这个问题与第一个细胞有关. 我有一个嵌套在info-cell中的表,有两行,每行有一个单元格.我们将这些单元称 问题

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

目前,我有一个表格,每个项目有两个单元格(我们称之为item-table).第一个单元格(信息单元格)具有可变高度,包含项目信息和链接.第二个单元(图像单元)包含图像并且高度可变.这个问题与第一个细胞有关.

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

期望的结果

理想的结果是将info-cell-top与顶部对齐,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%" >    <tbody>        <tr>            <td >                <table cellspacing="0" cellpadding="0" border="0" wIDth="100%" height="1">                    <tbody>                        <tr>                            <td >                                <table cellspacing="0" cellpadding="0" border="0" wIDth="100%" height="100%">                                    <tbody>                                        <tr>                                            <td >                                                <strong><a href="#" >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 >                                                <br>                                                <br> <strong><a href="#" >Bottom aligned</a>                                        &nbsp;&nbsp;&nbsp;<a href="#" >Add to cart</a>                                        </strong>                                            </td>                                        </tr>                                    </tbody>                                </table>                            </td>                            <td wIDth="120px" valign="bottom" >                                <div ><b>Image with variable height</b>                                    <br>                                    <br>(may be shorter than left column)                                </div>                            </td>                        </tr>                    </tbody>                </table>            </td>        </tr>    </tbody></table>

请求

有什么建议我可以做些什么来达到我想要的结果？你能帮我吗？

解决方法 交换你的CSS vertical-align：top;在td中为此：< td valign =“top”>.

valign接受top | mIDdle | bottom值,而align(horizo​​ntal)接受left | center | right.

对于此布局,您还需要rowspan或固定高度,因为嵌套表(您的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" >    </td>  </tr>  <tr>    <td wIDth="400" height="300" valign="bottom" bgcolor="#CCCCCC">Align Bottom    </td>  </tr></table>

它有助于在您的行间隔单元格上设置高度,因为Outlook有时可以猜测并弄乱您的行间隔断点.有关该here的更多信息(虽然它指的是colspan,同样适用)

总结

以上是内存溢出为你收集整理的HTML电子邮件：顶部和底部对齐的内容全部内容，希望文章能够帮你解决HTML电子邮件：顶部和底部对齐的内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。