html - 使 div 在另一个之上，没有位置，只使用内联 css

Question

我正在尝试设计一封从我的网站发送给客户的信件，我复制了一个像这样的简单设计

https://jsfiddle.net/ju6twwtk/

我想用一个 Angular 图像覆盖右下角，但我无法获取此元素:

<div style="float:right; padding-top:15px;">   
  <img src="http://s017.radikal.ru/i407/1605/de/a777fd1811b5.png">
</div>

漂浮在边框之上。因为我在做信，我不能真正使用css类，所以我只需要使用inline-css。此外，正如您从 jsfiddle 中看到的那样，当您调整窗口大小时，右下角的图像开始漂浮在奇怪的位置。

   <div style="font-size: 80%; margin: 15px 0; clear: both;">
    <div style="width: 100%; border-top: 1px dotted #d8d8d8;">
        <a title="" href="http://example.com">
            <div style="margin-left: 16px; margin-bottom: -16px; padding-top: 16px;">
                <div style="width:180px;height:120px; border: 1px solid #e5e5e5;">
                    <div style="position: relative; height: 85px; text-align: center;">
                        <div style="padding: 20px;">
                            <img style="width: 32px; height: 32px;" src="http://www.iconsplace.com/icons/preview/salmon/pig-256.png">
                        </div>
                    </div>
                    <div style="height: 34px; top: 85px; width: 100%; right: 0; left: 0; background-color: #f5f5f5; border-top: 1px solid #e5e5e5;">
                        <div style="float:left; height: 34px; width: 35px; text-align: center; vertical-align: middle; line-height: 40px;">
                            <img style="width: 16px; height: 16px; border: none;" src="http://araskie.xtgem.com/file/images/16x16/Dollar.png" title="Currency">
                        </div>

                        <div style="float :left; font-size: 12px; color: #777; font-weight: bold; line-height: 1.2em; margin-top: 9px; margin-right: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;">
                            <span style="font-family: arial,sans-serif;">some text will go here</span>
                        </div>
                        <div style="float:right; padding-top:15px;">

                            <img src="http://s017.radikal.ru/i407/1605/de/a777fd1811b5.png">

                        </div>

                    </div>


                </div>
            </div>
        </a>
    </div>

让那个 Angular 留在原地并覆盖右下角的边界的最佳策略是什么？我也不能真正使用负边距，因为它们被电子邮件服务剥夺了。

Answer 1

我的想法是这样的:

<table style="border-collapse:collapse; margin-left: 16px; margin-bottom: -16px; padding-top: 16px; width:180px; min-height:120px; ">

    <tbody><tr style="outline: 1px solid #e5e5e5; height: 85px; text-align: center;">
        <td>

        </td>
<td>
  <table>
    <tbody><tr style="height: 30px;"></tr>
    <tr>

    </tr><img style="width: 40px; height: 40px;" src="http://www.iconsplace.com/icons/preview/salmon/pig-256.png">
 </tbody></table></td>

    </tr>

    <tr style="background-color: #f5f5f5; border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5;">
        <td>
            <table style="min-height: 34px; display:inline-table;">
                <tbody><tr>
            <td style="height: 34px; width: 35px; text-align: center; vertical-align: middle; line-height: 40px;">
                <img style="width: 16px; height: 16px; border: none;" src="http://araskie.xtgem.com/file/images/16x16/Dollar.png" title="Currency">
            </td>
            <td style="font-size: 12px; color: #777; font-weight: bold; line-height: 1.2em; margin-top: 9px; margin-right: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;">
                <span style="font-family: arial,sans-serif;">some text</span>
            </td>




                <td style="right:0;bottom:0;">

                        <img src="http://s017.radikal.ru/i407/1605/de/a777fd1811b5.png">
            </td>
                </tr>
                </tbody></table>

        </td>




    </tr>


</tbody></table>