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

Question

我的 html 将通过电子邮件服务以电子邮件的形式发送。所以在 gmail、yahoo 邮件、outlook 等中它将是 read/displayed。这就是为什么我不能使用 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 个 objects 一个靠近另一个，然后在移动设备上，第二个向下，并且两者的宽度都与它们的宽度相同 parents

Answer 1

也许是个愚蠢的问题但是你使用了外部 css 来源吗？很多 CSS 不能在电子邮件模板中使用。这是我制作的模板，应该适用于您的用例。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 " />
    <meta name="format-detection" content="telephone=no"/>
    <style type="text/css">
        body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; font-family: 'ubuntu', Helvetica, Arial, sans-serif; }
        table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;}
        .table-button a:visited { color: #fff; }
        .table-button a:hover { text-decoration: underline; }
        .no_m { margin: 0px;}
        @media only screen and (min-width:481px) and (max-width:649px) {
            .em_main_table { width: 100% !important; }
            .em_wrapper { width: 100% !important; }
            .em_hide { display: none !important; }
            .em_full_img { width: 100% !important; height: auto !important; }
            .em_center { text-align: center !important; }
           
            .em_h20 { height: 20px !important; }
            .em_ptop { padding-top: 20px !important; }
            .em_pbottom { padding-bottom: 20px !important; }
            .em_pad1 { padding: 20px 10px !important; }
            .header1_pad { padding: 0px 10px 20px 0px !important; }
            .em_hauto { height: auto !important; }
            .dimensions_30012018 { width: 100% !important; height: auto !important; }
            .em_data-tablet { display: table-cell !important; }
        }
        @media screen and (max-width: 649px) {
            .em_block { display: table-row !important; }
            .top-half { width: 50% !important;}
            .mobile_button { width: 100% !important; display: inline-block !important; padding: 5px 0px !important;}
        }
        @media screen and (max-width: 480px) {
            .em_main_table { width: 100% !important; }
            .em_wrapper { width: 100% !important; }
            .em_hide { display: none !important; }
            .em_center { text-align: center !important; }
            .em_hide1 { display: none !important; }
        }
    </style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#f3f8fc">
<table role="presentation" class="em_wrapper" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top">
            <table role="presentation" align="center" width="650" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:650px; table-layout:fixed;" bgcolor="#f3f8fc">

                <tr>
                <td mc:edit="zorgexpert" valign="top" align="center" style="padding:35px 25px 35px 25px; background-color:#ffffff;" class="em_pad1" bgcolor="#ffffff">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                        <tbody>
                            <tr>
                                <td align="center" class="em_black em_m_l" colspan="2" style="font-family:ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#333333;padding:11px 0px 19px;" valign="top">
                                    <table role="presentation"  align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                                        <tr>
                                            <td colspan="2" align="center">
                                                <table role="presentation" class="em_wrapper" align="center" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td class="mobile_button">
                                                            <a class="em_link_nu" href="" style="mso-line-height-rule:exactly;color:#fff;text-decoration:none;font-weight:700;display:block;font-family:Verdana, sans-serif;font-size:14px;line-height:20px;" target="_blank">
                                                                <table role="presentation" width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2922C" align="left" style="width:240px;background-color:#04A0DA;border-radius:6px;" class="table-button table-button-bl em_wrapper">
                                                                    <tr>
                                                                        <td align="center" class="em_white" height="41" style="border-collapse:collapse;mso-line-height-rule:exactly;" valign="middle">
                                                                             <span class="em_white" style="color: #ffffff; text-decoration: none;">
                                                                                 Button
                                                                             </span>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </td>
                                                        <td height="10" width="10px" class="em_hide" style="height:10px; width:10px; line-height:0px; font-size:0px;">&nbsp;</td>
                                                        <td class="mobile_button">
                                                            <a class="em_link" href="" style="mso-line-height-rule:exactly;color:#fff;text-decoration:none;font-weight:700;display:block;font-family:Verdana, sans-serif;font-size:14px;line-height:20px;" target="_blank">
                                                                <table role="presentation" width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2922C" align="left" style="width:240px;background-color:#F2922C;border-radius:6px;" class="table-button table-button-or em_wrapper">
                                                                    <tr>
                                                                        <td align="center" class="em_white" height="41" style="border-collapse:collapse;mso-line-height-rule:exactly;" valign="middle">
                                                                             <span class="em_white" style="color: #ffffff; text-decoration: none;">
                                                                                 Button
                                                                             </span>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
</body>

Answer 2

请注意，您应该有 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>

接下来，您需要一个 table 容器来存放您的电子邮件。

此示例是一个非常简单的两个按钮 table，反映了您的需求。我调整了内边距使它们的大小大致相同。

<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/

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

祝你好运。

Answer 3

这就是它在所有这些尝试之后成功的原因：

 <table cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center" style="overflow-x:auto;margin: 30px 60px 0px 60px; width: calc(100% - 120px);">
<tr>
    <td>
      <table style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 20px;">
        <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;height: 45px;"
            >
              <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>
        </tr>
      </table>

      <table style="display: inline-block; vertical-align: middle;margin-bottom: 20px;">
        <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; 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>
    </td>
  </tr>

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

how to set 2 buttons in 2 tables 1 under the other on mobile , html django templating

css

html-table

html-email

display