代码之家 › 专栏 › 技术社区 › rosu alin

如何在2个表中设置2个按钮1在另一个表下移动HTML Django模板

display html-email html-table css

rosu alin · 技术社区 · 6 年前

我的HTML将通过电子邮件服务作为电子邮件发送。因此,它将在Gmail、雅虎邮箱、Outlook等中读取/显示。这就是为什么我不能使用内联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>

这是它在桌面上的外观,部分很好(我需要将第一个按钮放在左边):

正如你所看到的,这就是它在手机上的样子,明显地被打破了:

我只想拥有一个物体,一个靠近另一个,然后在手机上,第二个向下,两个物体的宽度都和他们的父母一样。

3 回复 | 直到 6 年前

gwally 6 年前

只是提醒一下,您应该有一个到lato的备份字体,它将不能与Outlook、Gmail或其他一些不支持Web字体的电子邮件客户端一起使用。

如果按钮的文本为两行,则需要重新配置该文本,使其在Outlook中看起来更漂亮。一个按钮不应该需要两行。这是一个很好的模板,可以让你前进。

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

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

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

这个示例是一个非常简单的两按钮表,反映了您想要的内容。我调整了衬垫使它们大致相同。

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

剩下的我就留给你去做。

祝你好运。

Remco Horters 6 年前

也许是个愚蠢的问题,但是你使用了外部的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>

rosu alin 6 年前

这就是它在所有这些尝试之后工作的原因:

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