html 邮件中的相对/绝对位置问题

Question

我最近尝试发送 html 邮件，但我遇到了 div 位置的一些问题。相对/绝对。我尝试谷歌，发现电子邮件客户端不支持 div 的定位。

我真正想做的是..我有如下图像。

现在我需要通过html在图像上绘制一个矩形。我所拥有的只是矩形在图像上的位置。假设它在房子上进行一些协调。如下图所示

有人可以帮忙吗？ 预先感谢。

Answer 1

如果您无法弄清楚为什么 css 在电子邮件中不起作用，您可能只想尝试仅使用内联样式。过去我发现一些电子邮件客户端似乎忽略了内部样式表中的类和某些规则。唯一能正常工作的是内联样式和标签，例如 B。

Answer 2

你可以使用绝对定位。我在这里写了示例代码。请参考此链接http://jsfiddle.net/shivkumarganesh/Fga2z/

是的，桌子也会很有效率！

.table{
background:url('your image URL');
background-width:300px;
background-height:200px;
width:300px;
height:200px;
background-repeat:no-repeat"
}

<table class="table">
<tr>
<td></td>
</tr>
</table>
<!--Now make TD and TR tags and give them Custom height so that at least one cell is on the image.Then give that cell <td> a border eg.border:red 2px solid.-->

Answer 3

根据我的经验，绝对位置应该可以使用。

只需确保至少将

position: relative

添加到要放置矩形的容器中。否则它将绝对定位于文档正文。

这样的事情应该可以解决问题：

<div class="container">
   <div class="rectangle"></div>
   <img src="....">
</div>

.container{
  position:relative;
}

.rectangle{
  position: absolute;
  bottom: 20px;
  right: 20px; 
  border: 2px solid red;

}

Answer 4

我没有电子邮件客户端功能支持的经验，但是你不能有一个

div

，将此图像设置为

background-image

，并使用

position:relative

将另一个 div 放置在你需要的地方吗？

Answer 5

我知道已经过去 12 年了，但电子邮件客户端是出于安全目的的一些属性，而位置就是其中之一。因此，当您看到 HTML 文件时，它会在本地正常工作，而不是当您在签名中上传它时。如果您在电子邮件中检查该内容，您可以看到该属性已从那里完全删除。

正如 @Shiv_Kumar_Ganesh 提到的，解决方案之一是使用背景图像，但您会发现另一个问题，即在转发电子邮件时，如果您从电子邮件中删除任何现有内容，您会发现 HTML 中缺少背景图像.

如果有人知道我的问题的解决方案，请尽快回复。