HTML 不使用 <div> 的 EDM 叠加元素

Question

我目前正在创建一个 HTML EDM，我有一些图像要叠加。我实际上使用了这种方法http://jsfiddle.net/sqJtr/，当我在网络浏览器中查看时，我的图像可以正常显示。但是当我尝试通过电子邮件发送它时，div 标签被完全忽略，我的图像运行到处都是。

<table class="newsletter" border="0" cellpadding="0" cellspacing="0">
    <!--MASTHEAD ROW-->
    <tr>
        <td>
            <div id="container">
                <!-- LOGO -->
                <div id="overlay_logo">
                    <img src="" width="140"/>
                </div>

                <!-- MESSAGE FROM THE DEAN -->
                <div id="main_image">
                    <img src="" width="475"/>
                </div>

                <!-- SIDE GRAPHIC -->
                <div id="overlay_sidegraphic"></div>

                <!-- HEADLINE -->
                <div id="overlay_headline">
                    <!--DATE-->
                    <div class="date">31st August 2015</div>
                    <!--TITLE-->
                    <div class="title">Congratulations</div>
                </div>

                <!-- MESSAGE CONTENT -->
                <div id="overlay_content">
                    <div class="message">
                        <!-- INTRO -->
                        <b>Dear Staff,</b>
                        <br />
                        <!-- CONTENT -->
                        <br />
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam a orci eget pretium. Donec congue sit amet erat et pharetra. 
                        Aliquam erat volutpat. Sed a feugiat quam. Nulla lorem enim, rhoncus quis venenatis ac, pellentesque ut magna. In vitae lectus tempor, 
                        pharetra felis sit amet, fringilla sem. Nunc interdum erat nec tortor efficitur, 
                        eget aliquam lectus malesuada. Nulla neque enim, viverra quis interdum quis, faucibus ac mauris. Fusce lacinia lorem in mollis semper. 
                        <br />
                        <br />
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

我知道应该使用表格代替 div 标签，但我不知道该怎么做，我需要叠加几张图片。我试图搜索它，但大多数有用的都使用 <div> 标签，这对我不起作用。将不胜感激对此的一些指导。谢谢！

Answer 1

最后，我使用了 html table 生成器 http://www.tablesgenerator.com/html_tables# 来创建 tables 并添加了额外的列和行作为填充来替换 div，因为 div在 outlook 中不起作用。

使用带有额外 columns/rows 的 table 作为填充非常令人困惑，但至少它对我有用。

HTML 不使用 <div> 的 EDM 叠加元素

HTML EDM Overlay Elements without using <div>

html

css

overlay