Question

我知道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。

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

我尝试过使用mj-table的另一种方式，但它并不像我希望的那样：将mj-column放在移动设备上的图像下方。

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

谢谢

Answer 1

我将background-color属性放在<mj-section>上。

做到了我想要的。祝你好运！

Answer 2

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

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

根据您的情况，您需要设置<mj-breakpoint width="300px" />

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

在MJML中修复列的高度和宽度

2 个答案: