我正在尝试设计一封从我的网站发送给客户的信件,我复制了一个像这样的简单设计
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 留在原地并覆盖右下角的边界的最佳策略是什么?我也不能真正使用负边距,因为它们被电子邮件服务剥夺了。
最佳答案
我的想法是这样的:
<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>
关于html - 使 div 在另一个之上,没有位置,只使用内联 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37126784/