我不太习惯制作 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>
最佳答案
当您使用 align="left" 时在表格上，它就像在 CSS 中向左浮动。这就是 Gmail 正在做的事情，它使您的文本表格 float ，导致它溢出(弹出)到您的图像表格下方。
如果您希望表格中的文本对齐，请将其放在 <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 忽略，因为它会去除样式标签，保留默认的非响应式布局。
关于android - HTML 电子邮件在 Gmail 应用程序中看起来不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22614437/