html - 在 HTML 电子邮件中将图像 float 到表外

Question

我正在寻求创建一个应该在所有主要电子邮件客户端中工作的 HTML 电子邮件。 (阅读 - 基于表格的丑陋布局)

设计看起来像这样:

.

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

谁能指导我正确的方向？

EDM 需要具有响应能力并在矩形上具有圆 Angular 。

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

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