0

我知道这height不是一个有效的论据,mj-column但我想为这个问题找到一个解决方案。

我有一个想要复制的邮件模板,但找不到使用 MJML 的方法。

这是不起作用的代码:

  <mj-section>
    <mj-column width="300">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" ></mj-image>
    </mj-column>

    <mj-column background-color=yellow width="300">
    <mj-text mj-class="bigNumber"></mj-text>
    </mj-column>
  </mj-section>

mj-column background-color=yellow就是我想在移动设备上渲染的内容。

当你看这个 gif时,你可以看到当我调整窗口大小时,宽度突然改变并恢复正常。我不明白为什么。

我尝试了另一种使用方式,mj-table但它不像我想要的那样:将 mj 列放在移动设备上的图像下方。

有人经历过类似的事情并找到了解决方案吗?

谢谢

4

2 回答 2

0

我把background-color属性放在<mj-section>.

它做了我想要的。

遗憾的是,MJML 不支持任何使列等高的方法。为了获得相同的效果,也许您可​​以在较短的列上放置相同的背景颜色。这样看起来是一致的。

祝你好运!

于 2018-08-16T20:01:37.480 回答
0

您需要设置mj-breakpoint。在断点宽度之前,布局将是桌面,但在断点宽度之后,它将是100%所有 mj 列的宽度。

默认情况下 mj 断点宽度320px

在您的情况下,您需要设置<mj-breakpoint width="300px" />

示例:https ://mjml.io/try-it-live/HkU5I3TFS

于 2019-10-23T11:21:16.487 回答