Question

我正致力于构建基于电子邮件的HTML。现在我们知道，电子邮件客户端不支持Position属性，所以我将不得不继续。现在，看看我的选项...我可以选择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>

Fiddle

我的预期结果是，所有黑色的div都相互重叠，放在同一个位置。如果它根据＆＃34;父元素＆＃34;计算边距是可能的。但它是从父母和前面的元素中留下的边距。

所以现在我的问题是，是否有一种方法可以使用marging-left，top作为top，left属性并产生与position：absolute相同的行为？或者简单地说，使用边距或填充属性将这三个元素放在彼此的顶部（无位置，因为电子邮件客户端不支持）

我也知道，使用Divs作为电子邮件并不是最好的方法，我应该考虑使用表但是相信我，我正在处理的HTML类型只能使用Div生成，有些可以使用保证金或垫衬。任何帮助将不胜感激。

Answer 1

您可以使用负边距来实现重叠。

margin-top: -50pt

http://jsfiddle.net/pkdqh7kt/1/

以下是水平堆叠div的示例：

http://jsfiddle.net/pkdqh7kt/2/

此外，您可以查看this table以找出主要电子邮件客户端当前支持的CSS属性。

使用边距/填充实现无位置属性的绝对定位

1 个答案: