我正致力于构建基于电子邮件的 HTML。现在我们知道,电子邮件客户端没有很好地支持位置属性,所以我将不得不在没有它的情况下继续。现在,看看我的选择......我可以选择 Margin 或 padding 来定位元素。 输入元素可以相对定位或绝对定位。我现在只考虑绝对部分。所以,我的输入将是例如
One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)
现在,在基于 HTML 的普通浏览器中,这些元素可以很容易地放置在适当的位置。但是没有 position: absolute
甚至 top, left 属性。它变得很棘手,因为 margin 属性相对于其他元素排列元素。这是一个示例运行:
<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>
我的预期结果是,所有黑色 div 相互重叠,并放置在同一位置。如果它根据“父元素”计算边距,这是可能的,但它是从父元素左边和从前面的元素顶部边距。
所以我现在的问题是,有没有一种方法可以使用 marging-left, top 作为 top, left 属性并产生与 position:absolute 相同的行为?或者简单地说,使用 margin 或 padding 属性将这三个元素放在彼此之上(没有位置,因为电子邮件客户端不支持)
我也知道,将 Divs 用于电子邮件并不是最好的方法,我应该考虑使用表格,但请相信我,我正在处理的 HTML 只能使用 Divs 生成,有些则使用边距或填充。任何帮助将不胜感激。
最佳答案
您可以使用负边距来实现重叠。
margin-top: -50pt
http://jsfiddle.net/pkdqh7kt/1/
这是水平堆叠 div 的示例:
http://jsfiddle.net/pkdqh7kt/2/
您也可以查看this table找出主要电子邮件客户端目前支持哪些 CSS 属性。
关于javascript - 实现没有Position属性的绝对定位,使用Margin/Padding,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27632822/