无法在电子邮件中使用 CSS 顺序(弹性框) [英] Trouble having CSS order (flex box) work in an email

问题描述

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

相同的代码，即使全部包含在电子邮件代码中，也不会以相同的方式发挥作用.这是只适用于浏览器的东西吗?

以下是一些无法正常工作的示例代码:

<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; "><div style="order: 2">增长<strong>2</strong></div><div style="order: 5">安全<strong>5</strong></div><div style="order: 3">收入<strong>3

<div style="order: 4">税收效率<strong>4</strong>

<div style="order: 1">流动性<strong>1</strong></div>

补充:

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

很好奇我如何才能真正移动细分...正如经常发生的那样，我在最后一分钟被要求这样做并且没有时间学习一个全新的系统，但如果有人知道如何做到这一点完成，也许可以将我指向正确的链接，那就太好了.

非常感谢大家到目前为止的评论.

解决方案

在电子邮件模板中使用 flexbox (或任何现代 css 方法) 很简单不好.

您可以在此处找到有关电子邮件模板中使用内容的信息.强>

如果这是您第一次构建电子邮件模板，我建议您使用语义框架来轻松完成此操作.电子邮件构建框架考虑了响应式电子邮件的所有要求，该电子邮件在各种电子邮件客户端以相同的方式显示.

根据我目前的经验，电子邮件基础 (zurb 电子邮件堆栈) 是这样做的最佳选择.就像我说的，它是语义的，并且易于理解(和使用).一切都为您自动化，甚至应用了浏览器同步.

示例语法:

<容器><行><columns small="12" large="6">第一列</columns><columns small="12" large="6">第二列</columns></row></容器>

<块引用>

2019 年 7 月 7 日 - 更新:您还可以在 MJML 允许更轻松的模板创建，因为它有自己的编辑器和实时模板视图.

I have got some HTML working fine in 2 web pages, but at one point, I grab the innerhtml of the container div and mail that to the user.

The same code, even when it's all in the email code, doesn't function the same way. Is this something that only works in browsers?

Here is some sample code that isn't working as I'd like :

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

ADDITION :

OK... most of what I'm finding around on the web, leads me to believe that displaying the code that I shared earlier will not transfer to email. So I have a different question.... is it possible, that when I save the div's innerhtml to the field for insertion into the email that I can put the sub divs in the correct order BEFORE sending to the email? so the email just has to display it, not process it.

So curious how I can actually move the subdivs around... as often happens, I got asked to do this at the last minute and don't have time to learn an entirely new system, but if someone knows how this can be done and maybe point me to the right link, that would be great.

Thanks very much guys for your comments so far.

解决方案

Using flexbox (or any of the modern css methodologies) in email templates is simply no good.

You can find information about what to use in an email template here.

If this is your first time building an email template, I suggest that you use a semantic framework for doing this with a bit of ease. An email building framework takes into consideration all the requirements for a responsive email that is displayed in the same way across various email clients.

As from my experience so far, Foundation for emails (zurb email stack) is the best option of doing so. Like I said, it is semantic, and easy to understand (and use). Everything is automated for you, it even has browser-sync applied to it.

Sample syntax:

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

July 07 2019 - UPDATE: You can also use a nice little tool by the folks at MJML which allows for even easier template creation, because of its own editor and live template view.

这篇关于无法在电子邮件中使用 CSS 顺序(弹性框)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！