html - 在 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 放置在您需要的位置吗？