Css html电子邮件中时髦的宽度百分比和移动视图

我正在编写一封电子邮件（没有样式表），但我无法让此部分按我的要求执行。我想要的链接和图像并排，但也当在移动视图有链接下的图像。我有那份罚款（只是提一句澄清）

我试图让这两个图像并排放置，即使宽度减小到典型的手机尺寸，例如400px。但当我输入

width=“50%”

时，我会这样：

<img border="0" hspace="0"
     name="ACCOUNT.IMAGE.315"
     src="https://origin.ih.constantcontact.com/fs127/1107749317607/img/315.jpg"
     style="display: block"
     vspace="0"
   / width="50%"
     >
     <figcaption align="center">Time to Shine
     </figcaption>
</a>

是发光的时候了

在下面的代码中，它被扭曲了

之前：

之后：

我的最终目标是让它们像第一张图片一样并排排列，但宽度较小。目前，即使宽度%发生了变化，它也会变成这样：

什么影响宽度？ 请帮忙！ （使用MyEmma电子邮件服务，支持HTML5）

尝试将相同的内容放入两次，一次放入桌面版本，另一次放入移动版本

正如@Narong所提到的，只有有限数量的电子邮件客户端支持HTML5——最大的例外是Outlook和Gmail，它们加起来通常占30%左右。再加上更老、更晦涩的客户机，通常会有大约一半的收件人收到。除非你是在响应式样式表中这样做，否则不要对任何结构化的东西使用
s、
s、
边距
、
填充
。
在这里看起来不错：我相信唯一可靠地“支持HTML5”的电子邮件客户端是苹果设备上的。除非你所有的接受者都在使用它们，否则我建议重新考虑你的方法。在特定浏览器或设备中呈现的内容与收件人在其收件箱中看到的内容不同。此外，
figcaption
用于
figure
元素中，但不应在电子邮件中使用。为什么不为图像旁边的文本添加一个
span
。试着习惯用不同的方式思考电子邮件。非常感谢。谢谢你的建议！
<table border="0" cellpadding="0" cellspacing="0" id="textEdit" style="background-color: #FFF" width="100%">
<tbody>
<tr>
<td style="font-size: 12pt; font-family: Arial, Helvetica, sans-serif; color: #555" styleclass=" style_MainText" valign="top">
<table align="right" class="imgCaptionTable" style="text-align: center; margin-top: 5px; margin-bottom: 5px">
<tbody>
<tr>
<td>
<!-- INSERT LINK IN QUOTES, ex: <a href="LINK HERE"> --><a href="http://whartonmagazine.com">
<img border="0" hspace="0" name="ACCOUNT.IMAGE.315" src="https://origin.ih.constantcontact.com/fs127/1107749317607/img/315.jpg" style="display: block" vspace="0"/><figcaption align="center">Time to Shine</figcaption></a></td>
<td>
<!--INSERT LINK IN QUOTES, ex: <a href="LINK HERE"> --><a href="http://whartonmagazine.com">
<img border="0" hspace="0" name="ACCOUNT.IMAGE.315" src="https://origin.ih.constantcontact.com/fs127/1107749317607/img/315.jpg" style="display: block" vspace="0"/><figcaption align="center">Time to Shine</figcaption></a>
</td>
</tr>
</tbody>
</table>
<div style="font-size: 10pt; color: #981E32"><span style="font-family: Helvetica, Calibri, Arial, sans-serif">Also in this issue: </span></div>
<div align="left" style="text-align: left; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; color: #625467"><br/>
<p style="margin-top: 0; margin-bottom: 0; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; color: #625467"><a href="http://whartonmagazine.com" shape="rect" style="font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 10pt; color: #002C77"><span>Gracing the Class With TelePresence</span></a></p></div>
<p style="margin-top: 0; margin-bottom: 0; font-size: 8pt; font-family: Arial, Helvetica, sans-serif; color: #625467"><br/></p>
<div style="font-size: 8pt; font-family: Arial, Helvetica, sans-serif; color: #625467">
<p style="margin-top: 0; margin-bottom: 0; font-family: Helvetica, Calibri, Arial, sans-serif; color: #fff; font-size: 10pt"><a href="http://whartonmagazine.com" shape="rect" style="color: #002C77"><span>Faculty Shine During Wharton MBA Reunion</span></a></p>
<p style="margin-top: 0; margin-bottom: 0; font-family: Helvetica, Calibri, Arial, sans-serif; color: #fff; font-size: 10pt"><br/></p>
</div>
<div style="font-size: 8pt; font-family: Arial, Helvetica, sans-serif; color: #625467">
<p style="margin-top: 0; margin-bottom: 0; font-family: Helvetica, Calibri, Arial, sans-serif; color: #fff; font-size: 10pt"><a href="http://whartonmagazine.com" shape="rect" style="color: #002C77"><span>ReBlog: Save the Ultimate Asset for Yourself</span></a></p>
<p style="margin-top: 0; margin-bottom: 0; font-family: Helvetica, Calibri, Arial, sans-serif; color: #fff; font-size: 10pt"><br/></p>
</div>
<div style="font-size: 8pt; font-family: Arial, Helvetica, sans-serif; color: #625467" styleclass=" style_SocialMediaText">
<p style="margin-top: 0; margin-bottom: 0; font-family: Helvetica, Calibri, Arial, sans-serif; color: #002C77; font-size: 10pt"><a href="http://whartonmagazine.com" shape="rect" style="color: #002C77"><span>Watch List: Top Wharton Social Entrepreneurs</span></a></p>
<br/>
</div></td>
</tr>
</tbody>
</table>