Question

我试图使用纯HTML在电子邮件中包含两个图像作为标题。一幅图像将覆盖屏幕宽度的40％，另一幅图像将覆盖屏幕宽度的60％（两者的高度均为自动）。但是，两个图像的最大合并宽度为750像素，因此在大型台式设备上，合并的宽度不会超过此宽度。

我了解到一个技巧，该技巧涉及在主要内容之前和之后将td设置为0的宽度，这对文本效果很好，但对我的图像效果不太好。现在是我的代码：

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="0"></td>
    <td width="40%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 40%;" /></td>
    <td width="60%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 60%;" /></td>
    <td width="0"></td>
</tr>
</table>

And here is how the images should be displayed

不幸的是，代码无法正常工作；图像始终具有固定的宽度。我尝试删除空的td，尝试使用固定宽度而不是百分比，尝试单独使用width和作为一种样式，尝试了将宽度放置在不同位置的各种方法，但是似乎无论我尝试什么，我都无法并排显示响应图像。这在图像看起来太大的智能手机设备上是一个问题。自然，我不能使用媒体查询，因为Outlook不支持它们。

关于如何以响应方式并排显示两个图像的任何建议吗？

谢谢！

最好，贾维特

Answer 1

尝试这个。希望对您有所帮助。

<div style="width:750px;">
<table style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px;"></td>
<td style="width:60%; background-color: yellow; height:150px;"></td>
</tr>
</table>
</div>

使用纯HTML在电子邮件中并排创建响应图像

1 个答案: