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

【问题标题】：Float image outside table in HTML EmailHTML电子邮件中的表格外浮动图像
【发布时间】：2017-06-22 05:17:45
【问题描述】：

我正在寻找可以在所有主要电子邮件客户端中使用的 HTML 电子邮件。（阅读 - 丑陋的基于表格的布局）

设计看起来像：

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

谁能指引我正确的方向？

EDM 需要响应迅速，并且矩形上的圆角。

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

【问题讨论】：

不要使用绝对定位，尝试切片图片（有雷的圆圈）放置
如果您使用电子邮件，则可以用作 img 标签

标签： html css html-email

【解决方案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

【讨论】：

我不能使用绝对定位，因为它需要是与电子邮件客户端兼容的基于表格的布局。

【解决方案2】：

为雷声图像使用外部 div。然后给它一个disply:block 并使用text-align:center; 使其居中

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

【讨论】：