麻烦有CSS订单(弹性框)在电子邮件中工作

Question

我有一些HTML在2个网页中正常工作,但有一次,我抓住容器div的innerhtml并将其邮寄给用户.

相同的代码,即使它们都在电子邮件代码中,也不会以相同的方式运行.这是仅适用于浏览器的东西吗？

以下是一些不符合我要求的示例代码:

<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; ">
<div style="order: 2">Growth <strong> 2</strong></div>
<div style="order: 5">Safety <strong>5</strong></div>
<div style="order: 3">Income <strong> 3</strong> </div>
<div style="order: 4">Tax Efficiency <strong>4</strong> </div>
<div style="order: 1">Liquidity <strong> 1</strong></div>
</div>

附加:

好的......我在网上找到的大部分内容都让我相信,显示我之前分享的代码不会转移到电子邮件中.所以我有一个不同的问题....是否有可能,当我将div的innerhtml保存到字段中以插入电子邮件时,我可以在发送到电子邮件之前按正确顺序放置子div？所以电子邮件只需要显示它,而不是处理它.

好奇我怎么能真正地移动细分...经常发生的事情,我被要求在最后一分钟做这个,没有时间学习一个全新的系统,但如果有人知道如何做到这一点,也许指向正确的链接,这将是伟大的.

非常感谢你们到目前为止的评论.

Answer 1

这是仅适用于浏览器的东西吗？

在某种程度上,是的.

大多数电子邮件客户端只支持非常基本的HTML,当然也没有什 不要依赖新的HTML/CSS/JavaScript来正确地使用它们; 甚至更老也不总是运作良好 - 仍然需要布置带有表格的页面并使用内联样式进行视觉效果.

Answer 2

在电子邮件模板中使用flexbox （或任何现代的CSS方法）根本不好。

您可以在此处找到有关在电子邮件模板中使用什么的信息。

如果这是您第一次构建电子邮件模板，则建议您使用语义框架来轻松做到这一点。电子邮件构建框架考虑了在各种电子邮件客户端中以相同方式显示的响应电子邮件的所有要求。

根据到目前为止的经验，电子邮件基金会 （zurb电子邮件堆栈）是这样做的最佳选择。就像我说的那样，它是语义的，易于理解（和使用）。一切对您来说都是自动化的，甚至已应用了浏览器同步。

示例语法：

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

2019年7月7日-更新：您还可以使用MJML上的一个不错的小工具，由于它自己的编辑器和实时模板视图，它使模板的创建更加容易。