HTML电子邮件中表格外部的浮动图像

Question

我要创建一个HTML电子邮件，应该在所有主要的电子邮件客户端工作。(基于可读表的布局)

设计看起来像这样：

​

。

我不能对图像(带雷声的圆圈)使用绝对定位，因为电子邮件客户端不支持绝对定位。

有人能给我指引正确的方向吗？

EDM需要具有响应性以及矩形上的圆角。

此外，矩形的宽度也不能是固定的宽度。

Answer 1

试试这个：

 .rectangle{
  display:block;
  height:250px;
  width:250px;
  background:orange;
  position:relative;
  margin-top:100px;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
}
p
{
  margin-top:38px;
  position:fixed;
  color:white;
  width:200px;
  text-align:center;
  padding:10px;
}


.circle{
  position:absolute; 
  left:50%;
  margin-left:-25px;
  top: -40px;

}
.circle img{
  position:absolute;
width: 100px;
 border:3px solid white;
    height: 100px;
    border-radius: 100%;
    left:50%;
  margin-left:-25px;
  top: -20px;
    }

Answer 2

对雷电图像使用外部div。然后给它一个disply:block，并使用text-align:center;将它置于中心位置

演示https://jsfiddle.net/gje91rzs/embedded/result/