Css属性改变图像位置

Question

我正在做 html电子邮件模板，并且在页脚表中我需要做的是，预订图像从<td> 中弹出来看左边图像是我需要做的，我拥有的是正确的

所以请指导我如何做到这一点。

<tr style=" background-color:#2582bb;">

 <td width="113" height="214" valign="top"> 
 <img src="images/footer.png"  width="113" height="161"/>
  </td>

    </tr>

Answer 1

添加div relative定位，让img拥有absolute位置。调整顶部或底部参数并获得所需的输出。

这是解决方案。

守则：

<td width="113" height="214" valign="top"> 
    <div style="position:relative;">
      <img style="position:absolute; top:xx px; bottom: xx px" src="images/footer.png"  width="113" height="161"/>
    </div>
</td>

PS：使用顶部或底部。 xx是一个虚拟值，插入像素值以获得您想要的值。

Answer 2

另一个答案适用于网络，但对于html电子邮件不正确 - 很多电子邮件客户端都不支持这种位置，包括Gmail，Yahoo，Outlook 07,10＆amp; 13，Lotus Notes 6＆amp; 7，Android 2.3 Gmail和Windows Mobile 7.请参阅CSS Support Guide from Campaign Monitor - 下载完整指南PDF以获取完整的支持细分。

在html电子邮件中只有两种方法可以执行此操作：

1. 将图像切割成两张，并在上表格行中显示突出的顶部图像/部分
2. 如果你想把它保存为一个完整的图像，你必须使用rowspan（或colspan水平突出）

这是一个rowspan示例：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100" height="100" bgcolor="#F5F5F5">&nbsp;
    </td>
    <td width="400" rowspan="2" bgcolor="#252525">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="400" height="300" alt="">
    </td>
    <td width="100" height="100" bgcolor="#F5F5F5">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="100" height="200" bgcolor="#959595">&nbsp;
    </td>
    <td width="100" height="200" bgcolor="#959595">&nbsp;
    </td>
  </tr>
</table>