css - 如何解决邮件通讯中的这个文本问题？

Question

时事通讯中每个 rss 的文本都向下并位于左侧。

为了避免这种情况，我尝试更改为放置两列，但后来我无法更改列大小，移动版本中的文本换行。

<div style="text-align: left;">
     <a href="https://contratocompraventavehiculo.co">
          <img data-file-id="798535" height="60" src="https://gallery.mailchimp.com/fb081e42ac85d682d4bbec/images dd-8a84-47cd-b3e0-a23f612be.png" style="border: 0px  ; width: 60px; height: 60px; float: left; margin: 0px 15px 0px 0px;" width="60" /> 
     </a>
     <span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">
          <span style="font-size:16px">
               <span style="color:#000000">
                    Become an expert
               </span>
               <br />
               <a href="https://contratocompraventavehiculo.co" target="_blank"> 
                    <span style="color:#000000">
                         <strong>Discover new opportunities</strong>
                    </span>
               </a>
          </span>
     </span>
</div>

在下一个链接中，您可以看到文本正在下降并且没有与文本的第一部分对齐:https://i.imgur.com/Pez3jGp.png

Answer 1

HTML 代码与 20 年前的开始相比发生了很大变化。

一开始(20年前)，我们做的是表格。一切的表。这些天我们使用 <div>标签和 <aside>标签 - 但那时候，一切都在表结构中。为了精确定位，我们输入 <tables>里面<table>细胞。这是您仍然必须做的 - 仅针对电子邮件。:

<table>
   <tr>
      <td>
         <table><tr><td>some data</td></tr></table>
      </td>
   </tr>
</table>

此外，电子邮件中的表格仅支持有限的 CSS。而且你的 CSS 不能在 <style> 里面标签 - 它必须是内联的，如下所示:

<td style="text-align:right">

不是这样的:

<style>
    td{text-align:right;}
</style>

引用资料:

https://www.w3schools.com/html/html_tables.asp

https://www.sitepoint.com/how-to-code-html-email-newsletters/

https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/