修复 MJML 中列的高度和宽度答案

【问题标题】：Fix the height and width of a column in MJML修复 MJML 中列的高度和宽度
【发布时间】：2018-03-01 17:21:09
【问题描述】：

我知道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 列放在移动设备上的图像下方。

是否有人遇到过类似的事情并找到了解决方案？

谢谢

【问题讨论】：

列宽需要一个 px 值。它们应该设置为 width="300px"

标签： mjml

【解决方案1】：

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

默认mj-断点宽度320px

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

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

【讨论】：

【解决方案2】：

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

它做了我想要的。

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

祝你好运！

【讨论】：