如何在不使用位置和边距的情况下将元素放在另一个元素的顶部?

时间:2015-08-27 14:14:47

标签: html css html-email email-templates

这是我的代码:

<table>...Some content...</table>
<table>...Another content...</table>

我想把第二个表放在第一个表的顶部。这将用作电子邮件模板(在某些客户端位置和边距不可用)。

3 个答案:

答案 0 :(得分:3)

这是唯一可用的两个选项(在transform之外,如果position不可用,它肯定无法工作),这将允许一个元素入侵另一个元素的空间。如果您无法使用positionmargin,那么您运气不佳,需要重新评估您要实现的目标和原因。你有可能用图像做到这一点吗?

答案 1 :(得分:2)

总有方法......并不总是优雅,但是当你的选择有限时,&#39;工作&#39;通常是你真正需要的。国际海事组织,创造力与解决有限选项的问题同样重要,因为它在框外思考。

大多数电子邮件客户端都允许您设置&#39; height&#39;,因此只需将第一个表格(背景)包装在div中,然后给该div height:0px;。桌子会溢出div,但是下一个元素不会尊重它的空间,因为它的高度为0,并且有效地在前面分层。

http://jsfiddle.net/L0d3tnzu/

如果您希望表的大小完全匹配,您可能必须明确设置高度和宽度,但上面的小提琴说明了基本概念。希望这有帮助!

编辑: 根据评论中的其他信息(第二个表应该只与第一个表部分重叠),这里有一个更新的小提琴:https://jsfiddle.net/acq3ob6y/1/

编辑#2:编辑#2: 荡。 Outlook切换到HTML / CSS的Word / Office呈现引擎可能是获得WORSE的唯一方式,而不是IE版本。叹。 (感谢@Gortonington的评论/澄清!)

好吧,那么,背景图像的想法只是视网膜显示器的一个问题(如果你想要它们都是清脆美丽的视网膜 - 那么),视网膜设备将以更现代的方式处理CSS方式(希望如此!),那么作为解决方案如何:媒体查询定位设备分辨率使用双尺寸img加载CSS并使用css background-size约束它:http://jsfiddle.net/tcyjo7ok

第三次尝试是一种魅力?至少选项列表正在增长......

答案 2 :(得分:1)

在电子邮件客户端中叠加两个元素的唯一方法是使用背景图像。即使这样也可以在某些客户端中被破解,并且需要大量条件和重复代码(backgrounds.cm是电子邮件bg图像的良好资源)。

这是将在MOST客户端中显示的唯一选项。即使这仍然非常有限,并且使用起来不是很敏捷(但在所有电子邮件编码中都是如此)。大多数其他技术仅适用于几个客户,并且完全打破其他客户。