Question

我对HTML很陌生，我想要的是在另一个图像上放置一个图像图标，以便更清楚地说明有一个横幅，我需要的是在右上角有一个小图标。

我已使用此代码

<DIV style="position: relative; top:0px; left:700px; width:200px; 
height:5px"><a href="%%ftaf_url%%"><img 
src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-612a-`4609-b5a6-3bc4231cdf86.png" border="0"></a></DIV>

它在内容块中显得很好，但是当我发送电子邮件时，无论我做什么，这个图标总是出现在屏幕左侧。我也使用了下面的代码，但这也没有帮助。

<div style="display: flex; justify-content: right;">
<img src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-
612a-4609-b5a6-3bc4231cdf86.png" style="width: 40px; height: 40px;" />
</div>

Answer 1

使用以下代码

＆＃13;

<div style="justify-content: right; text-align: right">
<img src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-
612a-4609-b5a6-3bc4231cdf86.png" />
</div>

＆＃13;

Answer 2

flexbox或position在HTML电子邮件中都无法正常运行。最常见的方法是使用<table>而不是<div> s ，创建一堆表行，并对齐内容。

不确定你的代码是什么样的，但是这样的东西会起作用：

<table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0" width="600">
    <tr>
        <td style="background: url('cross-hatch-background.jpg');">
            <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0" width="100%" style="">
                <tr>
                    <td style="padding: 10px;">
                        <img src="envelope.png" align="right">
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px;">
                        <img src="logo.png" align="center">
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px;">
                        navigation
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

HTML中的位置图像图标无法按预期工作

2 个答案: