Question

我试图设计一封信，从我的网站发送给客户，我复制了一个简单的设计

我想用一个角度的图像覆盖右下角，但我无法得到这个元素：

<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>

将角落留在原位并覆盖右下角边框的最佳策略是什么？此外，我无法真正使用负边距，因为它们被电子邮件服务剥夺了。

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>

Answer 2

将right:0;bottom:0;用于图片div

Answer 3

我认为您需要以下内容。

<img style="width: 32px;height: 32px;position: absolute;bottom: 0;right: 0;" src="http://www.iconsplace.com/icons/preview/salmon/pig-256.png">

我不确定我是否理解这个问题，但如果不是您需要，请检查答案请告诉我，我可以尝试帮助

<强>更新是的，现在我理解了这个问题，我前段时间制作了一些时事通讯时出现了很多问题。唯一的方法是将其转换为表格，这意味着您需要创建表格并制作行来模拟该位置。一些可以提供帮助的链接

https://www.campaignmonitor.com/blog/email-marketing/2005/08/optimizing-css-presentation-in-html-emails/

https://www.campaignmonitor.com/blog/email-marketing/2007/07/tables-in-html-emails-nesting/

将div放在另一个顶部，没有位置，只使用内联css

3 个答案: