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

DEMO HERE

Answer 2

使用外部div作为雷电图像。 然后给它disply:block并使用text-align:center;将其置于中心

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