图像和表格并排,显示:内联在Outlook中不起作用

时间:2014-12-23 15:15:26

标签: email outlook html-email

我创建了一个html电子邮件,它在Thunderbird和Gmail中正常工作,但在Outlook中却没有。

我希望并排在一张图片和桌子上。 我使用display:inline来做到这一点。 但Outlook显示图像并在表格下方。

这里是代码:

http://jsfiddle.net/675db7ca/1/

<br/>
<div style="display:inline !important"><a href="http://www.google.com/" style="text-decoration:none">
  <img border="0" height="106" width="186" src="http://pheonix.jw.lt/killercat186px.jpg" alt="logo"/>
</a></div><table cellspacing="0" style="table-layout: fixed; display:inline !important; max-width:412px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellpadding="0" border="0" width="412">
 <tbody>
 <tr>
   <td width="200" border="0" style="vertical-align: bottom">
     <span style="font-family:Helvetica;font-size:17px;color:#000000;">Super Scral</span>
     <br/>
     <span style="font-family:Helvetica;font-size:16px;color:green;">Developper</span>
   </td>
  <td width="20" style="background-image: url('http://s.atchik-services.com/signature/signature_lignerouge.png');" rowspan="3">
    <div id="lignerouge"></div>
  </td>
  <td width="150" rowspan="2" border="0">
    <span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Tel</strong> : <a style="line-height:12px;padding:0px;margin:0px;color:#000001;text-decoration:none;" href="tel:0033xxxxxxxx">+33 <strong>x xx xx xx xx</strong></a>
</span>
    <br/>
    <span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Site</strong>:
<a style="line-height:12px;padding:0px;margin:0px;color:#000001;" href="http://www.google.com/">google.com</a></span>
  </td>
 </tr>
 </tbody>
</table>
<br/>

谢谢!

1 个答案:

答案 0 :(得分:0)

我真的不明白你在寻求帮助是什么。 我猜你想要文字旁边的图像,而不是上面......

将图像放在同一个表格的单元格中

<table cellspacing="0" style="max-width:412px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellpadding="0" border="0" width="412">
 <tbody>
 <tr>
 	<td><a href="http://www.google.com/" style="text-decoration:none">
  <img border="0" height="106" width="186" src="http://pheonix.jw.lt/killercat186px.jpg" alt="logo"/>
</a></td>
   <td width="200" border="0" style="vertical-align: bottom">
     <span style="font-family:Helvetica;font-size:17px;color:#000000;">Super Scral</span>
     <br/>
     <span style="font-family:Helvetica;font-size:16px;color:green;">Developper</span>
   </td>
  <td width="20" style="background-image: url('http://s.atchik-services.com/signature/signature_lignerouge.png');" rowspan="3">
    <div id="lignerouge"></div>
  </td>
  <td width="150" rowspan="2" border="0">
    <span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Tel</strong> : <a style="line-height:12px;padding:0px;margin:0px;color:#000001;text-decoration:none;" href="tel:0033xxxxxxxx">+33 <strong>x xx xx xx xx</strong></a>
</span>
    <br/>
    <span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Site</strong>:
<a style="line-height:12px;padding:0px;margin:0px;color:#000001;" href="http://www.google.com/">google.com</a></span>
  </td>
 </tr>
 </tbody>
</table>

如果您对电子邮件客户端的怪癖不太了解,最好不要在电子邮件中使用div。

显示:内联/块/等不适用于像表这样的元素。不要为这样的事情烦恼。