有没有办法在新闻稿电子邮件的多行表格中插入倾斜图像?
早鸟折扣图片没有定位在行的角落。 我切片图像并尝试无效,边距和位置都不起作用。
<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>
答案 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%;"> </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> </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>