将图像转换为 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> burcak.celik@renunion.com
    </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> burcak.celik@renunion.com
      </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 中的垂直色线。还为此使用了 table。

将图像转换为 HTML 邮件签名

Converting an Image to a HTML mail signature

html

css

outlook

outlook-2013