0

我正在制作已经设计好的个性化 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>
4

3 回答 3

0

您不应该专注于电子邮件中花哨的 CSS 技巧。电子邮件应该更多地关注内容，而不是 CSS 定位和噱头。

话虽如此，电子邮件客户端确实支持某些 CSS 属性。 单击此处检查不同的电子邮件客户端支持哪些属性。这里还有一个工具，可以让您查看您的电子邮件将如何在不同的电子邮件客户端中呈现。

所以我的建议是不要试图破解你的方式来显示你的内容，而是更多地关注最终用户会看到什么，而不是他如何看待它。

于 2013-09-03T09:04:09.943 回答
0

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

如有必要，将表格的边框设置为零 (<table border="0">) 使其不可见。

于 2013-09-03T09:30:04.123 回答
0

我对创建 HTML 电子邮件相当陌生，但我发现并非所有 CSS 代码都真正适用于所有电子邮件客户端，因此最好坚持使用尽可能多的 HTML。

实现此目的的一种方法是使用包含两列的表格。在左栏中有文本 1 和 3，然后在右栏中有文本 2。为了创建间距，您需要包含给出间距的空“单元格”。

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

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

于 2016-07-06T16:03:34.210 回答