在简报中的多个表行上显示图像

时间:2015-10-15 15:19:01

标签: html css html-email

有没有办法在新闻稿电子邮件的多行表格中插入倾斜图像?

早鸟折扣图片没有定位在行的角落。 我切片图像并尝试无效,边距和位置都不起作用。

<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

1 个答案:

答案 0 :(得分:2)

不要成为坏消息的承载者,但就HTML电子邮件而言,在大多数电子邮件客户端中,你的电子邮件都无法正常运行。电子邮件客户端有一个非常特殊的&#39;阅读HTML和CSS的方式。桌子是主要的,浮动和divs,因为容器大多数是出来的。保证金和填充只能真正有效地用于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/

我还创建了一个修复&#39;在您的问题上,但请记住,某些电子邮件客户端中的其余电子邮件可能会失败。我所做的是创建一个定义的长度TD来容纳最上面的切片图像然后我确保valign底部为那个。在下一行,我在TD中创建了一个包含两列的新表。在右边的TD上,我再次定义了一个宽度来放置它。在最后一个我定义了TD宽度以及将valign设置为top。

最重要的一个主要问题是行的大小。高度大于图像高度,这意味着它根据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>