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移動設備上的電子郵件標頭

回答

相關問題