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> 

Попробуйте объявить другие две табличные строки таблицы-заголовка-группы.

Answer 3

ч,

код, который делает укладку в неправильном порядке находится на линии 62

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

После того, что комментируется и/или удалены укладывание работает должным образом. Как только вы удалите, что ваша навигация перепуталась. Он заканчивается небольшой шириной.

После этого сделать то же самое следующее:

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

}

После этого она должна быть тонкой.

Приветствия