我并不习惯制作HTML电子邮件。当然，我必须在相同电子邮件的基本两个版本中开始响应。当我以为我为大多数客户完成它时，我意识到Android和iOS的gmail应用程序给了电子邮件第三眼。我已经阅读了标题部分的gmail条带，但即使我尝试设置它内联gmail应用程序仍然是第三个看起来。下面评论中的图像链接显示了移动应该看起来和gmail应用程序的外观。问题在于我有三列应该变为一列，将图像向左移动，标题和文本向右移动（如移动图像）。 Gmail应用会在其每一行显示图片，标题和文字。它应该 - 充其量 - 看起来像移动设备或至少看起来像桌面版。
感谢任何帮助。
由于
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
table td { border-collapse: collapse; }
h2, p {margin: 0;}
h2 {padding-top: 15px;}
.img, .text {display: block;}
body .deviceWidth {width: 680px}
@media only screen and (max-width: 640px) {
body .deviceWidth {width: 440px!important; padding:0;}
body .center {text-align: center!important;}
table.triplet {width: 99% !important; padding-bottom: 20px !important;}
.noPadding {padding-left: 0!important;}
.img, .text {width: 50%;}
.text p {padding-right: 20px;}
h2 {padding-top: 0!important;}
}
@media only screen and (max-width: 479px) {
body .deviceWidth {width: 300px!important; padding:0;}
body .center {text-align: center!important;}
.img img {width: 140px;}
}
</style>
<!-- Targeting Windows Mobile -->
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="font-family: Georgia, Times, serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top: 20px;">
<table class="container deviceWidth" width="700" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="padding: 0 10px 50px;" bgcolor="#ffffff" align="center" class="deviceWidth">
<img src="http://placehold.it/680x300" class="deviceWidth" border="0" alt="">
<h1 align="left">Header 1</h1>
<p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding: 0;" width="700">
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x210" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 1</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x300" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 2</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<table class="triplet" width="33%" align="left" style="background: #ffffff; border:1px solid #ffffff;" border="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0; padding-left: 10px; padding-bottom: 20px;" class="noPadding"><p style="mso-table-lspace:0;mso-table-rspace:0;"></p>
<!--[if IE]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table align="left" class="img" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p style="mso-table-lspace:0;mso-table-rspace:0;"><img src="http://placehold.it/210x100" border="0" alt=""></p></td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
<tr>
<td>
<![endif]-->
<table align="left" class="text" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2>Offer 3</h2>
<p style="padding-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</table>
<!--[if IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
在表格上使用align="left"时，它就像在CSS中左移。这就是Gmail正在做的事情，它会浮动文本表，导致它在图像表下方溢出（弹出）。
如果您希望表格中的文字对齐，请将其放在这些表格中的<td>内。
更新
对于html电子邮件中的响应，请尝试使用display:block;切换技术：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
@media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="switch" width="50%">
<img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td class="switch" width="50%" valign="top" style="padding:30px;">
Text here...
</td>
</tr>
</table>
</body></html>
Gmail会忽略这一点，因为它会删除样式标记，而保留默认的无响应布局。