创建电子邮件teamplate的问题 [英] Issue in creating email teamplate

问题描述

我正在尝试创建如下所示的电子邮件模板。我用表。我能够做的一切，除了图像不显示在正确的位置。图像应显示在容器的中间和顶部（见屏幕1），但我不能完成它。我尝试向 container 提供负边距，但gmail和其他邮件服务忽略负边距。 p>

>

这是我到目前为止所能完成的工作。

代码存在 here 。

解决方案

正如我所说：

如果是我，我会使顶部边框和图像一行。 - Alex
Thomas 23分钟前

将顶行更改为：

 < td valign =bottom> 
< b style =border-top-left-radius：5px; background-color：#fff; display：block; border：3px solid＃a3a9ac; border-bottom：0; height：100％; margin ：0; padding-bottom：20px; border-right：none;& nbsp;< / b> 
< / td> 
< td class =text-centerwidth =64> 
< img class =top-imagesrc =https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png> < / td> 
< td valign =bottom> 
< b style =border-top-right-radius：5px; background-color：#fff; display：block; border：3px solid＃a3a9ac; border-bottom：0; height：100％; margin ：0; padding-bottom：20px; border-left：none;& nbsp;< / b> 
< / td> 
  

检查结果 - http://jsfiddle.net/562ux 。

我没有在电子邮件客户端中测试过，但作为@Kheema Pandey说，你应该尝试使用内联样式。

I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.

Here's what I was able to accomplishd till so far.

The code is present here. Can anyone please help with this?

解决方案

As I said:

If it was me i would make the top border and the image a row. – Alex Thomas 23 mins ago

Change you top row to:

<td valign="bottom">
    <b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;">&nbsp;</b>
</td>
<td class="text-center" width="64">
    <img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png">    </td>
<td valign="bottom">
    <b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;">&nbsp;</b>
</td>

check out the result - http://jsfiddle.net/562ux.

I've not tested this in a email Client, but as @Kheema Pandey says, you should try to use inline styles.

这篇关于创建电子邮件teamplate的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！