Question

编辑：在Inliner的第2版中出现此问题，我尝试了V1，一切正常。

尽管使用v1取得了小小的胜利，但电子邮件根本没有响应，它在移动设备上显示为桌面版，而在浏览器中则是响应式。我的所有代码都是基础教程中的vanilla摘录。如果有人知道如何解决这个问题，请分享。谢谢！

我正在使用Zurb Foundation for Emails发送一封电子邮件。一切都很好，但在我完成电子邮件并将其放入他们提供的HTML/CSS Inliner tool后，我的电子邮件就会中断。一切都散落在浏览器周围，我该如何绕过这个问题呢？

我正在使用Tutorial page.上所述的默认网格展示位置唯一不同的是，我在foundation.css中为一些内部元素添加了一些行和一些自定义样式，与网格无关，还有一些其他内联样式也只是颜色和文本对齐。

这是我的自定义css：

#topRight {
  padding: 3% 0 0 30%;
  font-size: 12px;
}

#topRight a img, #topRight a span {
display: inline-block;
vertical-align: middle;
}

.serviceLinks a {
  display: inline-block;
  width: 32%;
 }

 .serviceLinks a img {
  text-align: center;
  margin: 0 auto;
}

#footer {
  background: #32a0ca;
}
#footer p {
 text-align: center;
 color: #fff;
 font-size: 12px;
}
 #footer a {
  color: #35cdff;
}
#footer th {
  padding: 3%;
  margin: 0;
}

Answer 1

我设法解决了问题。

我使用ZURB Email Stack，这是创建响应式电子邮件最简单，最灵敏的工具。它使用NodeJS，它运行自己的本地服务器并为你解析一切，就像SASS / LESS / Stylus等一样，设法用CSS为你做。

您可以在单独的模块文件中创建布局，该文件将其注入到自己的空白HTML模板中。它允许您通过使用这样的基本层次结构来关注您的网格：

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

它基本上可以为你完成所有工作。没有桌子，没有桌子嵌套和重影，没有td，没有。

这太棒了。试试吧。

重要提示：虽然this tool的工作方式与魔术相似，但您绝不能忘记在CLI中使用npm run build启动您的基金会观看流程。这将强制框架为你内联CSS，否则你将不得不手动内联它，这不起作用，相信我。

选择此作为答案，因为它解决了我在顶部帖子中描述的 特定问题 。

电子邮件Inliner工具基础打破布局

1 个答案: