我正在编写一封响应式电子邮件，而且我遇到了一些表格的问题。请查看附图，了解所需的效果。
https://dl.dropboxusercontent.com/u/58655025/mail_scenario.jpg （左：“正常”行为;右：响应行为，当视图宽度<= 320px时）
我不确定这些块有多少元素（矩形和方形块;块元素和内容的数量是动态的）总共有多少元素，所以我希望尽可能保持HTML的动态。因此，每次向每个块添加一个新元素时，它都位于前一个元素的右侧，当它们无法适合该行时（由于电子邮件的最大宽度为620px），我希望它们能够继续下面。 这就是我无法做到的部分。这些元素在同一行中不断增长，而忽略了电子邮件的max-width属性。
我希望实现仅基于表格，以保证尽可能最大限度地支持电子邮件客户端。
我能做些什么来实现这个目标？还有其他建议吗？
请查看这个小提琴以获取实例：http://jsfiddle.net/afe33fhv/
或HTML代码，根据需要：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body {width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; color:#756d85; font-family:Helvetica, Arial, sans-serif;}
body.outlook img { width: auto !important; max-width: none !important;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
.backgroundTable {margin:0; padding:0; width:100% !important; line-height:100% !important;}
img {outline:none; text-decoration:none; border:none; -ms-interpolation-mode:bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #756d85;text-decoration: none;text-decoration:none!important;}
table[class=full] { width: 100%; clear:both; }
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:440px !important; text-align:center !important;}
table[class=devicewidthinner] {width:420px !important; text-align:center !important;}
table[class=devicewidthsocial] {width:200px! important; text-align:center !important;}
img[class=banner] {width:440px !important; height:220px !important;}
img[class=colimg2] {width:440px !important; height:220px !important;}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:300px !important; text-align:center !important;}
table[class=devicewidthinner] {width:260px !important; text-align:center !important;}
table[class=devicewidthsocial] {width: 200px!important; text-align:center !important;}
img[class=banner] {width: 280px!important; height:140px!important;}
img[class=colimg2] {width: 280px!important; height:140px!important;}
td[class=mobile-hide]{display:none !important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<!-- | Horizontal blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#7c84ca">
<tbody>
<tr><td width="100%">1</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#bdaabf">
<tbody>
<tr><td width="100%">2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d26ec1">
<tbody>
<tr><td width="100%">3</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d85c79">
<tbody>
<tr><td width="100%">4</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- | Square blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8eb7c2">
<tbody>
<tr><td>1</td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8ec296">
<tbody>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#636a34">
<tbody>
<tr><td>3</td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#c17b01">
<tbody>
<tr><td>4</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
答案 0 :(得分：0)
您可能想要废弃这些表格。将所有块设置为display: inline-block;，如果父容器没有足够的宽度，它们将自动换行到下一行。
通过使用媒体查询，您可以确保父容器框只能采用某些宽度，从而创建所需的效果。
这是一个jsfiddle演示：http://jsfiddle.net/spkzj05b/2/
以下是热门电子邮件客户端支持的css功能列表：https://www.campaignmonitor.com/css/
以下是在不同电子邮件客户端中测试呈现的工具：https://litmus.com/email-testing