html-email - HTML电子邮件并排图像每张图像1-2px太宽
问题描述
处理具有多个并排图像但每行具有不同数量的列/图像的电子邮件时遇到问题。我在每一行都放了一个表格,所以我不必使用 colspan,因为图像都是不同的宽度。一行中的图像越多,行越宽,即使所有行的所有图像的组合宽度相同。
在此处查看图像示例:
示例 HTML(请参阅 JS fiddle,因为由于某种原因,代码不会在此处正确发布):
<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/
电子邮件的固定宽度为 600 像素,额外的边宽在移动设备上最为显着,它会破坏电子邮件的流动。由于我们设计师的点击区域,这些行的宽度很奇怪。
无论我尝试什么,我似乎都无法以完全相同的宽度显示行。
解决方案
推荐阅读
- sql - 如何在 SQL 存储过程中使用读锁
- php - 我正在尝试在 PHP 中运行此查询:INSERT INTO SET
- pyspark - Spark:如何将多行转换为具有多列的单行?
- asp.net - HTTPPOST 请求没有被 API 命中,但相同的 API 正在从 POSTMAN 工作
- javascript - 使用 Javascript 或 jQuery 拖放时如何交换元素
- apache-spark - 如何将具有相同/共享分区的 HDFS 文件块应用于同一数据节点上的不同文件/表
- angular - IonicRouteStrategy 和 RouteReuseStrategy
- node.js - Heroku 部署和流量
- php - 如何使用 ejabberd 一次性向我名册中的所有朋友发送消息或向我名册中的每个人广播消息?
- bigdata - 无法在 Vespa 的 Document 中动态添加 Postion(纬度和经度)类型字段