html - 将图像转换为 HTML 邮件签名

Question

我利用我的业余技能将我们的签名设计转化为 HTML 代码。

但是当我把它放到 Outlook 中时，它看起来已经损坏了。

有人可以告诉我如何做或直接修复我的代码吗？

<div style="float:left;" id="renlogo">
  <img src="http://i.imgur.com/bs6yRbO.png">
</div>

<div style="float:left;" id="colorline">
  <div class="green" style="background-color: #67b32e;width: 4px; height: 52px;">
  </div>
  <div class="pink" style="background-color: #e61e47;width: 4px; height: 52px;">
  </div>
  <div class="blue" style="background-color: #51bec7;width: 4px; height: 52px;">
  </div>
  <div class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;">
  </div>
</div>

<div id="card" style="float:left;margin-top:20px;margin-left:12px;">
  <div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
    Burçak ÇELİK
  </div>
  <div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
    Co-Founder & Managing Partner
  </div>
  <br/>
  <div>
    <div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
    </div>
    <div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">E-mail:</span> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4123343322202a6f22242d282a0133242f342f282e2f6f222e2c" rel="noreferrer noopener nofollow">[email protected]</a>
    </div>
    <div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">Website:</span> http://renunion.com
    </div>
    <div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
    </div>
  </div>

fiddle :https://jsfiddle.net/m46zx0oc/

Answer 1

<table>
  <tr>
  <td>
    <div id="renlogo">
      <img src="http://i.imgur.com/bs6yRbO.png" width="159" height="208">
    </div>
  </td>
  <td>
      <table style="border: none;
    border-collapse: collapse;
    padding: 0;
    margin: 0;">
      <tr>
      <td class="green" style="background-color: #67b32e;width: 4px; height: 52px;"></td>
      </tr>
      <tr>
      <td class="pink" style="background-color: #e61e47;width: 4px; height: 52px;"></td>
      </tr>
      <tr>
      <td class="blue" style="background-color: #51bec7;width: 4px; height: 52px;"></td>
      </tr>
      <tr>
      <td class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;"></td>
      </tr>
      </table>
  </td>
  <td>
  <div id="card" style="margin-top:20px;margin-left:12px;">
    <div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
      Burçak ÇELİK
    </div>
    <div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
      Co-Founder & Managing Partner
    </div>
    <br/>
    <div>
      <div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
      </div>
      <div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">E-mail:</span> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6705121504060c4904020b0e0c2715020912090e08094904080a" rel="noreferrer noopener nofollow">[email protected]</a>
      </div>
      <div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">Website:</span> http://renunion.com
      </div>
      <div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
      </div>
    </div>
  </div>
  </td>
  </tr>
</table>

而不是使用 float:left ，使用table反而。 Outlook 无法真正处理float很不错。请注意，我添加了一个额外的 <td></td>要创建额外的边距，请随意添加更多的额外间距。

编辑:修复了 Outlook 中的垂直色线。还使用了一个表格来制作它。