Question

我使用切片工具从Photoshop导出后，将PDF传单转换为HTML。将其导入Dreamweaver时，我只是调整了一些细节。结构没有改变。但是，我遇到了图像问题。我无法弄清楚是什么阻止了单元格中的图片与相邻单元格对齐。

有问题的单元格如下：

<td>
 <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_06.jpg" width="302" alt="" style="display:block;">
</td>

顺便说一下，我使用内联CSS的原因是因为我将此邮件作为HTML电子邮件发送给there are issues when dealing with this。

Answer 1

将vertical-align:top添加到该行：

<tr style="vertical-align:top">
    ...
    <td>
        <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_06.jpg" width="302" alt="" style="display:block;">
    </td>
</tr>

<强> jsFiddle example

Answer 2

实际上......有两个问题。

上述vertical-align:top [谢谢你j08691]

但是，该图像元素缺少style="display:block;

http://jsfiddle.net/hbM9P/3/

此代码：

<td rowspan="2">
        <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_05.jpg" width="24" height="573" alt=""></td>

应该是：

<td rowspan="2">
        <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_05.jpg" width="24" height="573" alt="" style="display:block;></td>

Answer 3

为了获得更好的跨客户端html电子邮件支持，您实际应该使用valign="top"中的html <td>，而不是其他答案中建议的CSS vertical-align。

Outlook '07，'10和'13

中的

vertical-align is unsupported

表格单元格中的图片不会对齐相邻单元格

3 个答案: