<td>在响应式电子邮件中未正确堆叠
<td>s not stacking properly in responsive email
所以我正在尝试构建我的第一封响应式电子邮件，除了我的两个导航区域外，一切都进行得很顺利。第一个，我有四个按钮，我想将它们从 运行 重新排列，以将两个按钮堆叠在两个按钮之上。它在我的初始测试中有效，但是当我通过我的电子邮件提供商发送它时，前两个 tds 正确呈现（均为 50%），但应该放在下面的两个都被压到一边。与我尝试做的第二个导航相同（除了，我希望三个导航切换到彼此之上的 100%）
如有任何关于如何解决此问题的建议，我们将不胜感激！这是我的代码（在这里工作正常，但当我实际发送它时在所有移动设备上中断）：
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 50%;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656">
<tr>
<td class="main_nav" width="600" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
我建议将内联单元换成对齐的 table。细胞在 50% 时效果不佳，您始终需要低于该值。也就是说，您的单元格永远不会正确对齐，您将在下面的我的版本中看到这一点。
使用如此接近对齐的 tables 的一个缺点是您需要在 tables 周围添加 ghost tables，以确保 Outlook 尊重关闭您想要的对齐方式，并且不会在 tables.
之间添加所需的 20px 边距
我只对您的原始单元格宽度进行了调整，在 header CSS 中调整为 49%，然后我在您下方的新行中创建了对齐的 tables 版本原始代码，在我的包装 table.
内有一个新的 main_nav_inner class
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 49%;
}
td[class="main_nav2"] .main_nav_inner table {
width: 50%!important;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav2 {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav3 {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
</style>
</head>
<body style="min-width: 100%; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" yahoo="fix">
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656" width="100%">
<tr>
<td class="main_nav" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td class="nav4" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="main_nav2" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="main_nav_inner">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav1" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav2" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav3" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav4" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
</body>
</html>
所以我正在尝试构建我的第一封响应式电子邮件，除了我的两个导航区域外，一切都进行得很顺利。第一个，我有四个按钮，我想将它们从 运行 重新排列，以将两个按钮堆叠在两个按钮之上。它在我的初始测试中有效，但是当我通过我的电子邮件提供商发送它时，前两个 tds 正确呈现（均为 50%），但应该放在下面的两个都被压到一边。与我尝试做的第二个导航相同（除了，我希望三个导航切换到彼此之上的 100%）
如有任何关于如何解决此问题的建议，我们将不胜感激！这是我的代码（在这里工作正常，但当我实际发送它时在所有移动设备上中断）：
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 50%;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656">
<tr>
<td class="main_nav" width="600" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
我建议将内联单元换成对齐的 table。细胞在 50% 时效果不佳，您始终需要低于该值。也就是说，您的单元格永远不会正确对齐，您将在下面的我的版本中看到这一点。
使用如此接近对齐的 tables 的一个缺点是您需要在 tables 周围添加 ghost tables，以确保 Outlook 尊重关闭您想要的对齐方式，并且不会在 tables.
之间添加所需的 20px 边距我只对您的原始单元格宽度进行了调整，在 header CSS 中调整为 49%，然后我在您下方的新行中创建了对齐的 tables 版本原始代码，在我的包装 table.
内有一个新的 main_nav_inner class<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 49%;
}
td[class="main_nav2"] .main_nav_inner table {
width: 50%!important;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav2 {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a,
td[class="main_nav2"] .main_nav_inner .nav1,
td[class="main_nav2"] .main_nav_inner .nav3 {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}
</style>
</head>
<body style="min-width: 100%; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" yahoo="fix">
<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656" width="100%">
<tr>
<td class="main_nav" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td class="nav4" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="main_nav2" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="main_nav_inner">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav1" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav2" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav3" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top" style="width:150px;">
<![endif]-->
<table align="left" class="nav4" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
<tr>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
</body>
</html>