css - 如何在移动设备上的 2 个表 1 中设置 2 个按钮，html django 模板

Question

我的 html 将通过电子邮件服务作为电子邮件发送。因此它将在 gmail、yahoo 邮件、outlook 等中读取/显示。这就是我不能使用 inline-flex 的原因。(我尝试使用 max-width 创建类，但它们被忽略了)。这是我文件中的内容，我将其包含在需要的地方:

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center">
    <tr>
        <td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
            <div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px 10px 0px 10px;margin: 30px 0 30px 60px; height: 45px;" class="mobileWidth100 mobilePadding0">
                <a width="auto" href="{{extra.manage_team}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Manage Team'%}</a>
            </div>
        </td>
        <td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
            <div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff; border: 1px solid #24b646; line-height:15px;background-color: #ffffff;width: 180px;padding: 0px 10px 0px 10px;height: 45px;">
                <a width="auto" href="{{extra.billing_overview}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #24b646; font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Billing Overview'%}</a>
            </div>
        </td>
    </tr>
</table>

这是它在桌面上的部分效果(我需要将第一个按钮更靠左):

这就是它在移动设备上的样子，如您所见，明显损坏了:

我想要的只是让 1 个对象彼此靠近，然后移动，第二个向下移动，并且两个对象的宽度都与其 parent 相同

Answer 1

请注意，您应该有 Lato 的备用字体，它不适用于 Outlook、Gmail 或其他一些不支持网络字体的电子邮件客户端。

如果您的按钮文本为两行，您将需要重新配置它以使其在 Outlook 中看起来不错。一个按钮永远不需要两行。这是一个很好的模板，可以帮助您继续前进。

首先，您需要一个媒体查询:

<style>
  @media screen and (max-width: 600px) {
    .stack-in-mobile {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }
</style>

接下来，您需要一个用于电子邮件的表容器。

此示例是一个非常简单的包含两个按钮的表格，反射(reflect)了您的需求。我调整了填充，使它们的大小大致相同。

<table>
  <tr>
    <td class="stack-in-mobile">
      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
        <tr>
          <td style="border-radius: 6px; background: #24b646;">
            <a href="#" target="_blank" style="background: #24b646; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 22px; color: #ffffff; display: block; border-radius: 6px; letter-spacing: 1px;">Manage Team</a>
          </td>
        </tr>
      </table>
    </td>
    <td class="stack-in-mobile">
      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
        <tr>
          <td style="border-radius: 6px; background: #ffffff;">
            <a href="#" target="_blank" style="background: #ffffff; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 12px; color: #24b646; display: block; border-radius: 6px; letter-spacing: 1px;">Billing Overview</a> 
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

• > https://jsfiddle.net/wallyglenn/h24e3fzx/

我会留给你设计其余的样式。

祝你好运。