我在Internet上没有找到任何解决方案，可以为HTML电子邮件创建RWD（响应式Web设计）断点列，其中，当屏幕宽度较小时，将两列彼此紧紧制动成两列，然后将两列居中对齐，因此，使用在其他地方找到的信息，我不得不尝试弄清楚如何做得最好。以下是适用于真正的旧电子邮件客户端以及Outlook 2007+和Windows 10电子邮件客户端的代码-其余代码可以使用样式和媒体查询来完成。断点。当然，对于Outlook 2007+，列将始终具有固定的宽度，但是当屏幕宽度小于600 px时，列会分解。 这是最好的解决方案吗？我的目标基本上不是问这个问题，而是向公众分享解决方案。但是我将在另一个主题中询问以下问题的问题，当列的高度不同时，下面的示例垂直对齐（是的，下面的代码还缺少一件事：在Outlook 2007+中列对齐到底部，而不是行的顶部）。两列带有图片示例的图片彼此相邻（基本上只需粘贴> 600px html电子邮件并发送给自己）：
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
当然-您可以使用表align =“ left”将两个表彼此相邻，但是在brakipoint之后，它们是一个在另一个表下面，但对齐的是左不居中-因此，上面的方法对我来说最好。 让我提醒您这个问题。上面的示例是html电子邮件的最佳RWD解决方案吗？