移动设备上的 Zurb Ink 电子邮件标题答案

【问题标题】：Zurb Ink Email Header on mobile devices移动设备上的 Zurb Ink 电子邮件标题
【发布时间】：2015-09-07 13:32:13
【问题描述】：

我的电子邮件中有一个标题，右边有一个徽标，左边有一些链接（都在一行上）。工作正常，但在移动设备上查看时，左侧的链接溢出到两行。

理想情况下，我希望移动版在顶行显示徽标，并在其下方显示如下链接：

桌面：

Logo       Link 1 Link 2 Link 3

手机：

        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>

【问题讨论】：

标签： html-email zurb-ink

【解决方案1】：

我不太确定某些类在您的 html 中做了什么，因为我习惯于使用 Inky，这是 Foundation for Email 2 的模板语言，但解决方法应该是一样的。

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

例如：

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

或者，如果您使用 Inky，则仅在您的 <columns> 标签上使用属性 large。因此，small 属性将复制large 属性的值。

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

在中心显示您的徽标（如果您使用 Foundation for Email 2）：

<img> 元素上的.float-center 类
<img> 元素上的 align="center" 属性
用<center> 标签包装<img>（Outlook 2007、2010 和 2011 需要）

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

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

【讨论】：