用于更改图像位置的 Css 属性答案

【问题标题】：Css property to change image position [closed]用于更改图像位置的 Css 属性
【发布时间】：2017-06-23 22:50:15
【问题描述】：

我正在做 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>

【问题讨论】：

标签： html css html-table html-email

【解决方案1】：

添加带有relative 定位的div，并使您的img 具有absolute 定位。调整top或bottom参数，得到想要的输出。

这是解决方案。

守则：

<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 是一个虚拟值，插入像素值得到你想要的。

【讨论】：

哦,,, 非常感谢你它的工作。我添加了它，在 Dreamweaver 设计视图中只是拖动它，但在此代码之后可以拖动它
它是否也适用于电子邮件客户端？
是的，它有效。但不要拖它。在浏览器中检查输出后设置手动值。
好的，谢谢你会在 2 分钟内将其标记为接受你真的帮了大忙 :)
不客气 :) - @JavaStudent

【解决方案2】：

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

在 html 电子邮件中只有两种方法可以做到这一点：

将您的图像一分为二，并在上面的表格行中突出顶部图像/部分
如果要将其保留为一张完整图像，则必须使用 rowspan（或 colspan 用于水平突出）

这是一个行跨度示例：

<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>

【讨论】：

是的，这应该是公认的答案。在构建电子邮件时，您必须构建尽可能低的渲染，这将确保它永远不会中断。
我没有测试它是否有效，将检查该客户是否在上述客户中无效，并且还将测试您的客户是否有效