是否可以在响应式HTML电子邮件中将按钮粘贴到列的底部？
目前我正在使用 MJML 并能够在桌面版本上实现它。像这样的东西：（这就是我想要的，所以停止给出导致不同桌面输出的答案然后如下）
问题是在移动视图中，按钮没有与文本保持一致。
我正在使用 MJML，但也欢迎需要原始 HTML 和 CSS 的答案，只要它适用于所有主要的电子邮件客户端。
问问题
543 次
4 回答
3
更新：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（因为几乎每个桌面客户端都支持它们）：
- 将高度设置为初始以拥有没有任何高度的移动版本
- 添加媒体查询以添加高度。
为什么要在 mj-text 上保留 height="400px" ？当在 mj-text 上设置高度时，MJML 会生成一些 Outlook 条件表：所以我们保持 Outlook 与此的兼容性:)
旁注：在您的初始标记中，您在一个部分中有 mj-text，即使您在一个部分中只有一个，您也必须放置一列。
这是一个小的兼容性链接https://litmus.com/checklist/emails/public/8b29552
于 2017-05-23T11:45:55.543 回答
0
<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>
于 2017-05-23T13:46:25.410 回答
-1
我建议你使用<mj-table>. 通过这种方式，您可以在文本下方添加按钮，并将此布局保留在移动设备中。
片段：
<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>
随心所欲添加样式！
于 2017-05-23T10:22:12.897 回答
-2
您需要将按钮放在列内，但它们不会位于同一级别 https://yadi.sk/d/JfegGMD13JSFuA
于 2017-05-23T10:17:22.753 回答