Question

我正在制作一个已经设计过的个性化HTML电子邮件。我已使用表格中的所有内容对电子邮件进行编码。我需要以一种分散的方式将文本放在一行中的三个不同区域中。我尝试将文本放入表格行中的div并使用内联CSS设置样式，但是，当我在emailonacid（电子邮件测试网站）上测试时，它无法在不同的电子邮件程序中正确显示。有没有办法可以做到这一点，以便适用于所有电子邮件程序？

我想像这样定位文字： http://i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg 黑框是图像的位置。

<tr>
    <td>
                    <div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
                    <br/>
                    <span style="font-weight: bold;">&#163;#XX.XX#</span></div>
        <img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">

                     <div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
                    <br/>
                    <span style="font-weight: bold;">&#163;#XX.XX#</span></div>

                    <div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
                    <br/>
                    <span style="font-weight: bold;">&#163;#XX.XX#</span></div>   
                    </td>
</tr>

Answer 1

你不应该把精力充沛的CSS技巧集中在电子邮件中。电子邮件应该更多地关注内容而不是CSS定位和噱头。

说过电子邮件客户端确实支持某些CSS属性。 Click here检查不同电子邮件客户端支持哪些属性。此处还有一个tool，可以让您了解如何在不同的电子邮件客户端中呈现您的电子邮件。

所以我的建议不是试图破解你的内容，而是更多地关注最终用户会看到的内容，而不是他看到的内容。

Answer 2

您还可以在行中添加另一个表来调整文本位置，而不是使用CSS。这样您就可以轻松管理文本位置。

将表的边框设置为零（＆lt; table border =“0”＆gt;），以便在必要时使其不可见。

Answer 3

我是创建HTML电子邮件的新手，但我发现并非所有的CSS代码都适用于所有电子邮件客户端，所以最好坚持使用尽可能多的HTML。

您可以实现此目的的一种方法是具有两列的表。在左栏中，您有文本1和3，然后在右栏中有文本2.为了创建间距，您需要包含空的＆＃34;单元格＆＃34;给出间距。

<table width="600" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td width="290">
   <table align="center">
    <tr>
     <td>
      <h1>Text 1</h1>
     </td>
    </tr>
    <tr>
     <td height="20">
      &nbsp;
     </td>
    </tr>
    <tr>
     <td>
      <h1>Text 2</h1>
     </td>
    </tr>
  </table>
 </td>
 <td width="20">
  &nbsp;
 </td>
 <td width="290">
  <table align="center">
    <tr>
      <td height="20">
       &nbsp;
      </td>
     </tr>
     <tr>
      <td height="20">
       <h1>Text 2</h1>
      </td>
     </tr>
     <tr>
      <td height="20">
       &nbsp;
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

这应该为您提供坚实的基础，并且所有电子邮件客户端都将正确呈现表格。

在HTML电子邮件中的表格中定位文本

3 个答案: