时间戳

首页 > 解决方案 > 使用 Foundation 创建带有 Tiles 的电子邮件模板

html - 使用 Foundation 创建带有 Tiles 的电子邮件模板

问题描述

我正在使用 CSS 框架 Foundation for Email 创建响应式电子邮件模板。我的电子邮件设计有相邻堆叠的图块，但我无法使用原始 Foundation 来创建彼此之间的间隙。

我的 hacky 解决方案涉及使用 css 属性border来创建图块之间的视觉间隙。我想知道是否有比我尝试过的更好的解决方案。

我在 CodePen 的代码有两个表。第一个表是我想在不使用任何 hacky 解决方案的情况下修复的表。我的第二个修复涉及应用bordercss 属性以直观地创建所需的间隙。

我正在寻找一种解决方案，我不需要像我为第二张桌子所做的那样做任何骇人听闻的解决方案。

所需外观：https ://imgur.com/a/CiyUUs3

代码：https ://codepen.io/anon/pen/qYzGEN

标签： htmlcsszurb-foundationhtml-email

解决方案

border不是一条坏路。它受到电子邮件客户端的广泛支持，并且由于您将其用作样式表，因此可以通过@media查询根据电子邮件宽度的大小对其进行调整。唯一更好的方法可能是<table cellspacing="10">在表格之间强制留出空间。

您正在做的事情的缺点是 Outlook 仅具有部分支持background-color与 Android 相同。因此，在某些电子邮件客户端中，您不会有白色背景。我的建议是在每个表格单元格周围加入一个 1px 的边框style="border: 1px solid #333333;"以进行区分。

  <table class="row" cellspacing="10" border="1">
    <tr>
      <td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 3</td>
      <td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 4</td>
      <td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 5</td>
    </tr>
  </table>

我希望这能给你一些想法。

祝你好运。

推荐阅读