在新闻稿中的多个表格行上显示图像

Question

有没有什么方法在新闻稿电子邮件的多行表格上插入倾斜图像？

早起的鸟儿折扣图像没有定位在行的角落。 我切片的图像和尝试无济于事，边距和位置不工作。

<table style="border-collapse:collapse;font-family: Arial;width:95%;max-width:600px;" bgcolor="e5f1e8" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="25"></td> 
     <td> 
      <table width="650" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td> 
         <img style="margin:0; padding:0; border:none; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/header_03.jpg" alt=""> 
        </td> 
       </tr> 
       <tr> 
        <td style="background: #fff;" valign="top"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <h1 style="font-family:Arial; margin:0; padding-top:9px; padding-left:24px; font-size:18px; font-weight:bold; color:#ee7600; line-height:24px;">How To Value And Exit <br> 
            Your Business For Maximum Profit</h1> 

            <h2 style="font-family:Arial; line-height:20px; margin:0; padding:8px 0 10px 24px; color:#2b2b2b; font-weight:bold; font-size:15px;">An Informational Workshop For The Smart 
            Business Owner</h2> 

           </td> 
           <td> 
            <img style="margin:-16px 88px 0 0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early1.png"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td align="right" height="22"> 
         <img style="margin:0 53px 0 0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early2.png"> 
        </td> 
       </tr> 
       <tr> 
        <td bgcolor="#ffffff"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <img style="margin:20px; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/img3.jpg" alt=""><span style="float:left;width:70%; padding-top:15px;padding-bottom:15px;"> 
       <h1 style="font-family:Calibri; margin:0 0 10px 0; font-weight:bold; font-size:20px; color:#ee7600;">This event will demonstrate how to value a<br> 
        business and prepare a business for sale:</h1> 
       <ul style="padding:0 0 0 18px; margin:0; font-family:Calibri; font-size:15px; color:#1e1e1e;"> 
        <li style="padding:3px 0">Business valuations that withstand buyers’ negotiation pressures</li> 
        <li style="padding:3px 0">What is needed for a valuation and what are key ratios to value a business</li> 
        <li style="padding:3px 0">The right professional packages to attract capable, legitimate buyers</li> 
        <li style="padding:3px 0">How to qualify investors and which ones to avoid</li> 
        <li style="padding:3px 0">How to obtain a solid offer with the best deal structure for yourself</li> 
        <li style="padding:3px 0">What to do with Uncle Sam and what to look for in a closing attorney</li> 
       </ul> 
       </span> 

           </td> 
           <td valign="top" align="right"> 
            <img style="margin:0;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early3.png"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td width="25"></td> 
    </tr> 
</table> 

JsFiddle for the template

Answer 1

为了不被坏消息的承载，但据HTML电子邮件去，你是不会在大多数电子邮件客户端很好地工作。电子邮件客户端有一种非常'特殊'的方式来阅读HTML和CSS。由于容器大部分都是外面的，桌子是主食和浮游物和隔间。保证金和填充只能真正用于TD标签 - 而有些客户甚至不会认可保证金。

下面是一些链接，可帮助您提供一些有关电子邮件设计和开发'入出'的良好参考和指南。不同浏览器之间

https://www.exacttarget.com/products/email-marketing/email-design-toolkit https://litmus.com/blog/html-email-coding-101-infographic http://templates.mailchimp.com/getting-started/html-email-basics/ http://www.sitepoint.com/how-to-code-html-email-newsletters/

CSS功能 - https://www.campaignmonitor.com/css/

我还创建您的问题 '修复'，但请记住，电子邮件的其余部分可能某些电子邮件客户端失败。我所做的是创建一个定义的长度TD来放置最上面的切片图像，然后我确定了该底部的valign底部。在下一行中，我在TD中创建了一个有两列的新表。在正确的TD上，我再次定义了一个宽度来放置它。在最后一个我定义TD宽度以及设置valign顶部。

顶部的一个主要问题是行的大小。高度大于图像高度，这意味着它不会连接到顶部或根据valign连接到底部。我对样本中的字体大小和行高进行了更改以解决此问题。

<table style="border-collapse:collapse;font-family: Arial;width:95%;max-width:600px;" bgcolor="e5f1e8" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="25"></td> 
     <td> 
      <table width="650" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
        <td> 
         <img style="margin:0; padding:0; border:none; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/header_03.jpg" alt=""> 
        </td> 
       </tr> 
       <tr> 
        <td style="background: #fff;" valign="top"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td style="padding:8px 24px 10px;"> 
            <div style="font-family:Arial; margin:0; font-size:16px; font-weight:bold; color:#ee7600; line-height:22px;">How To Value And Exit <br> 
            Your Business For Maximum Profit</div> 
            <div style="height:7px; font-size:7px; mso-line-height-rule:exactly; line-height:100%;">&nbsp;</div> 
            <div style="font-family:Arial; line-height:18px; color:#2b2b2b; font-size:13px;">An Informational Workshop For The Smart 
            Business Owner</div> 

           </td> 
           <td width="239" valign="bottom" style="border-collapse:collapse;"> 
            <img style="display:block; border:none;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early1.png"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
       <td> 
       <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;"> 
       <tr> 
       <td>&nbsp;</td> 
        <td align="left" width="144" height="22" style="border-collapse:collapse;"> 
         <img style="display:block; border:none;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early2.png"> 
        </td> 
       </tr> 
       </table> 
       </td> 
       </tr> 
       <tr> 
        <td bgcolor="#ffffff"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <img style="margin:20px; float:left;" src="http://www.neumannassociates.com/newsletters/HTML/images/img3.jpg" alt=""><span style="float:left;width:70%; padding-top:15px;padding-bottom:15px;"> 
       <h1 style="font-family:Calibri; margin:0 0 10px 0; font-weight:bold; font-size:20px; color:#ee7600;">This event will demonstrate how to value a<br> 
        business and prepare a business for sale:</h1> 
       <ul style="padding:0 0 0 18px; margin:0; font-family:Calibri; font-size:15px; color:#1e1e1e;"> 
        <li style="padding:3px 0">Business valuations that withstand buyers’ negotiation pressures</li> 
        <li style="padding:3px 0">What is needed for a valuation and what are key ratios to value a business</li> 
        <li style="padding:3px 0">The right professional packages to attract capable, legitimate buyers</li> 
        <li style="padding:3px 0">How to qualify investors and which ones to avoid</li> 
        <li style="padding:3px 0">How to obtain a solid offer with the best deal structure for yourself</li> 
        <li style="padding:3px 0">What to do with Uncle Sam and what to look for in a closing attorney</li> 
       </ul> 
       </span> 

           </td> 
           <td width="95" valign="top" align="right" style="border-collapse:collapse;"> 
            <img style="display:block;" alt="" src="http://www.neumannassociates.com/newsletters/HTML/images/early3.png"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td width="25"></td> 
    </tr> 
</table>