Zurb Ink移动设备上的电子邮件标头

我的电子邮件中有一个标题，右侧有一个徽标，左侧有一些链接（全部位于一行）。工作正常，但在移动设备上查看时，左侧的链接会溢出两行。Zurb Ink移动设备上的电子邮件标头

我非常喜欢有移动版本显示在顶部行标志和它下面的链接如下所示：

桌面：

Logo  Link 1 Link 2 Link 3

MOBILE：

 Logo 
Link 1 Link 2 Link 3

我将如何实现这一目标？

我的代码：

<table class="row header"> 
     <tr> 
      <td class="center" align="center"> 
      <center> 
       <table class="container" style="border-bottom: 1px solid;border-bottom-color:#bdc3c7"> 
       <tr> 
        <td class="wrapper last"> 
        <table class="twelve columns"> 
         <tr> 
         <td class="four sub-columns full-size"> 

          <img class="left" style="float:left;width:180px !important;" src="#" width="180px"> 

         </td> 
         <td class="eight sub-columns last full-size" style="text-align:right; vertical-align:middle;"> 
          <a href="#">Link1</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><span style="color:black;font-weight:100">Link2</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><span style="color:black;font-weight:100">Link3</span></a> 
         </td> 
         <td class="expander"></td> 
         </tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </center> 
      </td> 
     </tr> 
     </table>

来源

2015-09-07 HHHH

我真的不知道有什么特定的类在HTML做，因为我已经习惯了与漆黑，基金会为电子邮件2模板语言，但变通工作应该是一样的。

由于css的工作方式（级联样式表），您需要覆盖样式标记中邮件顶部媒体查询中的内联样式和几个重要行。

例如：

@media only screen and (max-width: 480px){ 
td .example-class { width: 100% !important }; 
}

或者，如果你使用的漆黑仅使用属性large您<columns>标签。因此，small属性将复制large属性的值。

您的链接将被推到您的标志下，因为它的容器占据了整个宽度。

要在中央显示您的标志（如果使用的是基金会的电子邮件2）：在<img>元素

膜裹在

.float中心级的<img>元素
align="center"属性<img>与<center>标签（Outlook 2007,2010和2011需要）

或当使用Inky时：您的img周围的标签就足以完成这项工作。

来源对齐img：https://foundation.zurb.com/emails/docs/alignment.html

来源

2016-06-23 11:41:57 hardcodepunk

Zurb Ink移动设备上的电子邮件标头

回答

相关问题