在响应HTML电子邮件中，是否可以将按钮粘贴到行的底部？

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

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

问题是，在移动视图中，按钮没有粘在文本上

---

我正在使用MJML，但也欢迎需要原始HTML和CSS的答案，只要它能在所有主要的电子邮件客户端中工作。

您需要在列中放置按钮，但它们不会处于同一级别

---

我建议您使用

。通过这种方式，您可以在文本的正下方添加按钮，它将在移动设备中保持此布局

片段：

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-text 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-section>
      <mj-section>
        <mj-column>
          <mj-table>
            <tr>
              <td style="font-size:20px; color:#F45E43; font-family:'helvetica'; vertical-align: top;">
                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, .
              </td>
              <td style="font-size:20px; color:#F45E43; font-family:'helvetica'; vertical-align: top;">
                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. .
              </td>
            </tr>
            <tr>
              <td>
                <button>Testing testing testing</button>
              </td>
              <td>
                <button>Testing testing testing</button>
              </td>
            </tr>
          </mj-table>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-text 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-section>
    </mj-container>
  </mj-body>
</mjml>

Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa。
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa。
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa，在iaculis nibh。悬钩子
我是奥迪奥·乌纳。我的脸上长满了青紫，酒后驾车的脸上长满了青紫。毛里斯·米·迪亚姆（Mauris mi diam），摩尔式空调设备，权杖式座椅。
测试
测试
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa。

---

随着您的呼啸声添加样式

更新：MJML3.3.3现在可用，因此它可以在try-it-live中运行

---

因此，这项工作适用于MJML3.3.3（目前为Beta3），因此它在当前的MJML中不起作用，请试用：

div[样式*=“高度：400px”]{
身高：继承！重要；
}
@仅介质屏幕和（最小宽度：480px）{
.平等文本{
高度：400px！重要；
}
.equal text td{
垂直对齐：顶部；
}
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa。
测试
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa，在iaculis nibh。Suspendisse id odio urna。我的脸上长满了青紫，酒后驾车的脸上长满了青紫。毛里斯·米·迪亚姆（Mauris mi diam），摩尔式空调设备，权杖式座椅。
测试

一些见解：您必须为mj文本设置一个高度，以保持两列的高度相同。这只是实现这一点的一个技巧，因为两个div都是独立的，在使用当前MJML标记的电子邮件中无法实现这一点。问题是，当列的文本少于400px时，移动设备上的文本和按钮之间会有一个“间隙”

所以。。。我们通过媒体查询稍微调整了输出HTML（因为几乎所有桌面客户端都支持它们）：

• 将“高度”设置为“初始”，使移动版本没有任何高度
• 添加媒体查询以添加回高

为什么要在mj文本上保留height=“400px”？MJML在mj文本上设置高度时生成一些outlook条件表：因此我们保持outlook与以下内容的兼容性：）

旁注：在您的初始标记中，您在一个部分中有mj文本，即使在一个部分中只有一列，您也必须放置一列

这里有一个关于兼容性的小链接

@媒体屏幕和屏幕（最大宽度：480px）{
.堆栈列{
显示：块！重要；
宽度：100%！重要；
最大宽度：100%！重要；
方向：ltr！重要；
}
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa。
Lorem ipsum dolor sit amet，是一位杰出的献身者。在malesuada tellus ac magna pellentesque车辆中。前庭放置大鼠上肢非大鼠前庭。艾库利斯乌尔特里斯佩伦特斯克酒店。Donec ac iaculis massa。
测试
<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>

<style>
  @media screen and (max-width: 480px) {
    .stack-column {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      direction: ltr !important;
    }
  }
</style>

<body>
  <table>
    <tr>
      <td colpsan="2" style="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, .
      </td>
    </tr>

    <tr>
      <td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
          <!--[if mso]>
          <table role="presentation" aria-hidden="true" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
          <tr>
          <td align="center" valign="top" width="660">
          <![endif]-->
          <table role="presentation" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
              <tr>
                  <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                      <!--[if mso]>
                      <table role="presentation" aria-hidden="true" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                      <tr>
                      <td align="left" valign="top" width="330">
                      <![endif]-->
                      <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
                          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
                              <tr>
                                <td style="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, .
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <mj-button>Testing testing testing</mj-button>
                                </td>
                              </tr>
                          </table>
                      </div>
                      <!--[if mso]>
                      </td>
                      <td align="left" valign="top" width="330">
                      <![endif]-->
                      <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
                          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
                              <tr>
                                <td style="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, .
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <mj-button>Testing testing testing</mj-button>
                                </td>
                              </tr>
                          </table>
                      </div>
                      <!--[if mso]>
                      </td>
                      </tr>
                      </table>
                      <![endif]-->
                  </td>
              </tr>
          </table>
          <!--[if mso]>
          </td>
          </tr>
          </table>
          <![endif]-->
      </td>
    </tr>


    <tr>
      <td colpsan="2" style="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, .
      </td>
    </tr>
  </table>
</body>