基金会电子邮件：图像超过 2 行

Question

我正在使用 Foundation Framework 制作自定义响应式电子邮件。我想实现如屏幕截图所示的布局。关于如何使用 Foundation 实现这个的任何建议（或者这是否可能？请记住，这应该适用于所有主要的邮件客户端）

提前致谢！

Answer 1

这完全有可能，尽管不是微不足道的。您可以通过在上面的部分使用背景颜色来构建类似的东西，并在视觉所在的水平位置使用相同的颜色。

<row>
<row><img></row>
<row>

示例： https://codepen.io/rafibomb/pen/oeEMbO

Answer 2

如果您正在寻找 HTML 解决方案，那么下面是您可以使用的代码。

它很粗糙，但可以使用您的视觉提供一个想法。

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#17b0de" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:47px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 1</td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="55" height="190" bgcolor="#17b0de">&nbsp;</td>
        <td bgcolor="#49267c" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold;  text-align:center; font-size:80px;color:#ffffff;">VISUAL</td>
        <td width="55" bgcolor="#17b0de">&nbsp;</td>
      </tr>
    </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="55" height="79" bgcolor="#d9ecf2">&nbsp;</td>
          <td bgcolor="#49267c" style="height:10px;line-height:0px; font-size:0px;"></td>
          <td width="55" bgcolor="#d9ecf2">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#d9ecf2" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:20px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 2</td>
  </tr>
</table>

干杯

基金会电子邮件：图像超过 2 行

Foundation E-mail: Image over 2 rows

email

frameworks

html-email

zurb-foundation

responsive