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

Question

我正在使用Foundation Framework制作自定义响应式电子邮件。我想实现截图中显示的布局。关于如何实现这一点的任何建议，使用Foundation（或者甚至可以这样做？请记住，这应该适用于所有主要邮件客户端）

提前致谢！

Answer 1

如果您正在寻找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>

干杯

Answer 2

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

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

实施例： https://codepen.io/rafibomb/pen/oeEMbO