Question

我采用了我们的签名设计，并将其转换为具有业余技能的HTML代码。

但是当我把它展示给它时，它看起来很破碎。

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

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

小提琴：https://jsfiddle.net/m46zx0oc/

Answer 1

＆＃13;

.exe

＆＃13;

而不是使用<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。 Outlook并没有真正处理table。请注意，我添加了额外的float来创建额外的边距，随意添加额外的间距。

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

将图像转换为HTML邮件签名

1 个答案: