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

您在谈论垂直布局吗？不确定你的意思是正确的＆＃34; next＆＃34;对彼此。您可以使用valign="top"属性控制垂直展示位置。至于文本，文本将无法显示在当前的html下。

在HTML表格中将两个不同大小的图像对齐，以便发送电子邮件

1 个答案: