HTML 电子邮件、导航显示在手机底部

Question

我正在学习编写响应式电子邮件模板。目前这是我所拥有的：https://jsfiddle.net/q12yg2z6/

<tr class="main_nav">
    <td id="mobile_nav" width="600">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
                </td>
            </tr>
        </table>
    </td>
</tr>

如您所见，在移动设备上，桌面上的顶部导航将堆叠在底部。但现在它出现在主要 cta 和接下来的两列部分之间。我如何让它出现在页脚。我尝试使用我的代码四处移动，但找不到正确的方法。

Answer 1

使用这个：

@media screen and(max-width:500px){
tr[class="main_nav"] {
   display: table-footer-group;
   position:absolute;
   top:1000px;
   bottom:0px;   
}}

Answer 2

你有：

@media only screen and (max-width: 500px){
tr[class="main_nav"] {
    display: table-footer-group;
}
tr[class=main_cta] {
    display: table-header-group;
}
}

在你的 HTML 中：

<tr class="main_nav"></tr>
<tr class="main_cta"></tr>
<tr height="45"></tr>
<tr></tr>

尝试声明另外两 table 行 table-header-group。

Answer 3

h,

以错误顺序进行堆叠的代码在第 62 行

 tr[class="main_cta"] {
        display: table-header-group;
    }

一旦评论 and/or 删除堆叠工作正常。一旦你删除它，你的导航就会变得混乱。它最终是一个小宽度。

之后做同样的事情：

tr[class="main_nav"] {
display: table-footer-group;

}

之后应该就好了。

干杯

HTML 电子邮件、导航显示在手机底部

HTML email, navigation to appear at the bottom in mobile

html

css

html-email