在 HTML table 中将两个不同大小的图像并排对齐以用于电子邮件

Question

如何将两张不同尺寸的图片并排对齐？右侧较大的图像将左侧图像向下推到中间。它们应该彼此相邻，然后文本将出现在左侧图像下方。这是一个电子邮件模板。我试过 display:inline-block 但没有用。

 <table cellpadding="0" cellspacing="0" border="0" align="left" width="600">
                <tr>
                    <td width="10" bgcolor="#FFFFFF">
                        <font face="Arial, Helvetica, sans-serif" color="#aaaaaa">Test</font>
                    </td>
                    <td width="290" bgcolor="#FFFFFF">
                        <font face="Arial, Helvetica, sans-serif" color="#aaaaaa"><img src="http://placehold.it/248x59" alt="!"></font>
                    </td>
                    <td width="10" bgcolor="#FFFFFF">
                        <font face="Arial, Helvetica, sans-serif" color="#aaaaaa">Test</font>
                    </td>
                    <td width="280" bgcolor="#FFFFFF">
                        <font face="Arial, Helvetica, sans-serif" color="#aaaaaa"><img src="http://placehold.it/226x350" alt="!"></font>
                    </td>
                    <td width="10" bgcolor="#FFFFFF">
                        <font face="Arial, Helvetica, sans-serif" color="#aaaaaa">Test</font>
                    </td>
                </tr>
           </table>

这是 jsfiddle：http://jsfiddle.net/qb6nf2u0/

Answer 1

你说的是垂直放置吗？不知道你所说的 "next" 对彼此来说是什么意思。您可以使用 valign="top" 属性控制垂直放置。至于文本，文本无法显示在当前 html.

下

在 HTML table 中将两个不同大小的图像并排对齐以用于电子邮件

Align two images of different sizes next to each other in HTML table for email

html

html-table

html-email