Question

我正在使用CSS框架Foundation for Email来创建响应式电子邮件模板。我的电子邮件设计将磁贴堆叠在一起，但我无法使用raw Foundation创建彼此之间的差距。

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

我在CodePen的代码有两个表。第一个表是我想要修复的表，而不使用任何hacky解决方案。我的第二个修复涉及应用border css属性来直观地创建所需的间隙。

我正在寻找一个解决方案，在那里我不需要像我为第二个表所做的那样做任何hacky解决方案。

Answer 1

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

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

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

我希望能给你一些想法。

祝你好运。

Answer 2

如果您不想使用边框，请将自己绑在一张非常繁忙的文档中。我不喜欢像bootstrap一样的框架的原因之一，你可以使用一百种不同的内联类。

Foundation 2.2描述了表格的列：

在顶层，列为Microsoft.Build.BuildEngine.ConsoleLogger，其中包含<th>类。

.columns内部是另一个完整的表。您的列的内容位于<th>内。该表格标题正下方应为另一个<th>，其类别为<th>。这个空元素有助于在小屏幕上将列扩展为全宽。

基本上说，你要做很多嵌套。根据基金会2.2，结构将类似于这样的结构：

.expander

但是，在您的特定情况下，您需要将它们包装成一行，因为Foundation行处理列：

行是<th class="columns"> <table> <tr> <th>CONTENT HERE</th> <th class="expander"></th> </tr> </table> </th> ...repeat...，<table>和<tbody>。在此<tr>内，您将放置每个列。 <tr>也有类<table>。

所以你得到了重点，不幸的是更多的嵌套。要专门使用我认为的基础结构documented来回答问题，您需要为每个级别创建一行。含义Tile 1＆amp; 2有自己的行，Tile 3＆amp; 4＆amp; 5有自己的行等等。这为您提供了其余内联样式类和对齐类的灵活性，因为无论这意味着什么，您都将以“基础”方式进行操作。

现在测试时，我没有看到任何不良并发症，而省略.row课程，但由于他们建议使用它，我会按照他们的指导原则使用它。

以下是修订后的codepen代码段：https://codepen.io/anon/pen/BxgXJZ

我所做的修订以红色突出显示边界，白色显示内容以便快速提供视觉助手。样式和对齐我将留下您的项目范围。这是友好的响应，因为你也包括它的类。

在link-rot的情况下，这是代码片段：

.expander

Answer 3

如果您不想使用边框，下面是代码外观的示例，基本上很多表都嵌套在1中。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td width="49%" bgcolor="#000000">&nbsp;</td>
			  <td width="20">&nbsp;</td>
			  <td width="49%" bgcolor="#000000">&nbsp;</td>
			</tr>
		  </tbody>
		</table>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td>&nbsp;</td>
			</tr>
		  </tbody>
		</table>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td width="32%" bgcolor="#000000">&nbsp;</td>
			  <td width="20">&nbsp;</td>
			  <td width="32%" bgcolor="#000000">&nbsp;</td>
				<td width="20">&nbsp;</td>
			  <td width="32%" bgcolor="#000000">&nbsp;</td>
			</tr>
		  </tbody>
		</table>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td>&nbsp;</td>
			</tr>
		  </tbody>
		</table>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
			  <td width="66%" bgcolor="#000000">&nbsp;</td>
			  <td width="20">&nbsp;</td>
			  <td width="32%" bgcolor="#000000">&nbsp;</td>
			</tr>
		  </tbody>
		</table>
    </tr>
  </tbody>
</table>

希望这能让您了解结果的外观（代码视图）。

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

3 个答案: