HTML电子邮件并排图像每张图像1-2px太宽

时间:2018-06-05 09:08:22

标签: html-email electronic-direct-mail

在并排有多个图片的电子邮件时遇到问题,但每行都有不同数量的列/图片。我在每行放一张桌子,所以我不必使用colspan,因为图像都是不同的宽度。连续的图像越多,即使所有行的所有图像的组合宽度都相同,行也越宽。

请参见此处的图片示例:

https://i.imgur.com/i1xmxAW.jpg

示例HTML(请参阅JS小提琴,因为代码因某些原因无法在此处正确发布):

<table id="Table_1_col" width="600" border="0" cellpadding="0" cellspacing="0" background="ffffff"
   style="background:#fff;display:block;table-layout:fixed;border-collapse:collapse!important;mso-table-lspace:0;mso-table-rspace:0;border-spacing:0;border:0;mso-cellspacing:0;mso-padding-alt:0;padding:0;margin:0;font-size:0;line-height:0;width:600px;min-width:600px;max-width:600px;"
   valign="top">
<tbody>
<tr style="display:block;white-space:nowrap;">
    <td style="font-size:0;line-height:0;margin:0;padding:0;background:url(images/_TRAVEL-15_05.jpg);background-image:url(images/_TRAVEL-15_05.jpg);background-size:100% 100%;"
        valign="top" align="left"><a href="https://www.afterpay.com/en-AU/categories/travel" align="left"
                                     style="font-size:0;line-height:0;display:block;margin:0;padding:0;" target="_blank"><img src="images/_TRAVEL-15_05.jpg"
                                                                                                                              width="600" height="241" alt=""
                                                                                                                              style="float:left;width:600px;display:block;margin:0;outline:0;text-decoration:none;-ms-interpolation-mode:bicubic;border:0;"
                                                                                                                              border="0" align="left"></a></td>
</tr>
</tbody>

                                                                                                      

https://jsfiddle.net/jup4xw3v/3/

电子邮件的设置宽度为600px,附加边宽在移动设备上最为显着,因为它会破坏电子邮件的流量。由于设计师的点击区域,行是奇怪的宽度。

无论我尝试什么,我似乎无法让行以完全相同的宽度显示。

0 个答案:

没有答案