0

所以我正在尝试构建我的第一封响应式电子邮件，除了我的两个导航区域之外，一切都进行得很好。第一个，我有四个按钮，我想重新排列它们，从跑过，到将两个堆叠在两个之上。它在我最初的测试中有效，但是当我通过我的电子邮件提供商发送它时，前两个 td 正确呈现（均为 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 -->

4

1 回答 1

0

我建议将您的内联单元格换成对齐的表格。细胞在 50% 的情况下不会很好，你总是需要低于这个值。话虽如此，您的单元格将永远无法正确对齐，您将在下面的版本中看到。

使用如此接近的对齐表格的一个缺点是，您需要在表格周围添加幻像表格，以确保 Outlook 尊重您想要的紧密对齐，并且不会在表格之间添加它所需的 20px 边距。

我只对您的原始单元格宽度进行了调整，在标题 CSS 中调整为 49%，然后我在原始代码下方的新行中创建了对齐表格版本，并在我的包装表中添加了一个新的 main_nav_inner 类。

<!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>

于 2015-11-26T19:45:13.823 回答