0

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

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

桌面：

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>
4

1 回答 1

0

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

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

例如：

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

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

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

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

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

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

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

于 2016-06-23T11:41:57.497 回答