0
我想在两个元素之间放置一个imagem，但是当它到达一个电子邮件客户端时，它不起作用。
是否有可能得到一个元素的绝对定位或至少用float或其他东西来模拟它？如果没有，那么...回到基础然后（图片）
我有几个解决方案的参考，但他们都没有为我工作。电子邮件 - 如何模拟绝对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
bottom: 50px !important;
position: relative !important;
left: -3% !important;
right: 0;
float: right;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
</style>
</head>
<body>
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat.
Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum
eu. Aliquam malesuada aliquam nulla ut suscipit. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</body>
</html>
您可能永远都看不到您在电子邮件中看到的结果。电子邮件客户端通常对HTML有很多限制。使用表格（而不是div）以获得更多保证。有些电子邮件客户端甚至不支持保证金和填充。 – ata
正如阿塔说，除非你在做混合编码，否则你应该远离div。所选的答案也不适用于所有电子邮件客户端。 – Syfer