html - 是否可以使按钮粘在响应HTML电子邮件的行底部？

是否可以使按钮粘在响应HTML电子邮件的列底部？

目前，我正在使用MJML，并且能够在桌面版本上实现它。像这样：
（这就是我想要的，所以停止给出答案，导致桌面输出与以下内容有所不同）



问题在于，在移动视图中，按钮不粘贴文本。



Here is my MJML code

我正在使用MJML，但只要它在所有主要的电子邮件客户端中都可以使用，则欢迎回答需要原始HTML和CSS的问题。

最佳答案

更新：MJML 3.3.3现在可用，因此可以在现场试用中使用



因此，此功能可与MJML 3.3.3（目前为beta 3）一起使用，因此在当前的mjml中无法正常使用：

<mjml>
  <mj-head>
    <mj-style inline="inline">
      div[style*="height:400px"] {
        height: inherit !important;
      }
    </mj-style>
    <mj-style>
      @media only screen and (min-width:480px) {
        .equal-text {
          height: 400px !important;
        }
        .equal-text td {
          vertical-align: top;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text css-class="equal-text" height="400px" font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
          <mj-button>Testing testing testing</mj-button>
        </mj-column>
        <mj-column>
          <mj-text css-class="equal-text" height="400px" font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, in iaculis nibh. Suspendisse id odio urna. Cras nisi ipsum, mattis in dui id, pretium tincidunt purus. Mauris mi diam, molestie ac facilisis sed, scelerisque sit amet enim. .</mj-text>
          <mj-button>Testing testing testing</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

一些见解：您必须为mj-text设置高度，以使两列保持相同的高度。这只是实现此目的的一种技巧，因为这两个div都是独立的，并且无法通过电子邮件使用当前的MJML标记来实现。问题是，当列中的文字少于400像素时，它将在移动设备上的文字和按钮之间出现“间隙”。

所以...我们通过媒体查询对输出HTML进行了一些调整（因为几乎每个桌面客户端都支持它们）：


将height设置为initial以拥有一个没有任何高度的移动版本
添加媒体查询以增加高度。


为什么要在mj文本上保持height =“ 400px”？当在mj-text上设置高度时，MJML会生成一些Outlook条件表：所以我们保持与Outlook的兼容性:)

旁注：在初始标记中，某节中有mj文本，即使某节中只有一个，也必须放置一列。

这是兼容性的小石蕊链接https://litmus.com/checklist/emails/public/8b29552