在新聞稿中的多個表格行上顯示圖像

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>