css - html 电子邮件中的时髦宽度百分比和移动 View

Question

我正在编写一封电子邮件(没有样式表)，但我无法让该部分执行我想要的操作。我希望链接和图像并排放置，但在移动 View 中也希望链接位于图像下方。我没问题(只是为了澄清而提及)。

即使宽度减小到典型的手机尺寸(例如 400 像素)，我也试图让两个图像并排放置。但是当我像这样输入 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>

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

之前: http://i60.tinypic.com/33lnvvo.png

之后: http://i62.tinypic.com/2uol6e0.jpg

我的最终目标是让它们像第一张图片一样并排放置，但宽度较小。目前它最终看起来像这样，即使 width% 发生变化:http://i58.tinypic.com/2qbyu7l.png

什么影响了宽度？请帮忙!(使用 MyEmma 电子邮件服务，支持 HTML5)

<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>

Answer 1

尝试将相同的内容放入两次，一次是在桌面版中，一次是在移动版中。

FWIW，正如@Narong 所提到的，只有有限数量的电子邮件客户端支持 HTML5 - 最大的异常(exception)是 Outlook 和 Gmail，它们加起来通常占 30% 左右。加上年长和不知名的客户，这通常会达到您的收件人的一半左右。避免<div>小号，<p>小号，margin , padding对于任何结构，除非您在响应式样式表中执行此操作。