Question

我想编写一个响应流畅的电子邮件模板，我可以在不使用媒体查询的情况下堆叠3列。我可以使用下面的代码使它们浮动，并在宽度小于表的两个最小元素宽度之和时使它们堆叠。但是当宽度大于此值时，只有第三列堆叠，其余两列仍然是内嵌的。

如何在不使用媒体查询的情况下堆叠它们？如果可能的话。

＆＃13;

         table {
          }
          tr{
          	background-color: lightblue;
			
              min-width: 160px;
          }
          td{
          	display:block;
              width:33%;
              background-color: green;
              margin-left:auto;
              margin-right: auto;
              text-align: center;
              padding:0px;
              float: left;
              min-width: 160px !important;
              
          }

＆＃13;

    <table width="100%" bgcolor="green">
          <tr>
              <center>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              </center>
          </tr>
      	
      </table>

＆＃13;

JsFiddle：https://jsfiddle.net/o8gov8oe/

问题：

预期解决方案：

Answer 1

您可以使用混合方法在每个电子邮件客户端中安全地实现此目的，以便为电子邮件客户端重新配置不同屏幕尺寸的布局，而不管媒体查询支持如何。从本质上讲，它使用max-width和min-width来强加基线（允许某些移动），并为无论如何被束缚到桌面的Outlook强加固定宽度宽度。一旦设置了适合移动设备的基线，媒体查询就可以在支持它的客户端中逐步增强电子邮件，但不需要进行列堆叠。

以下是没有媒体查询的三列堆叠示例：

<html>
<body width="100%" bgcolor="#222222" style="margin: 0; mso-line-height-rule: exactly;">
   <center style="width: 100%; background: #222222; text-align: left;">

  <!--
            Set the email width. Defined in two places:
            1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
            2. MSO tags for Desktop Windows Outlook enforce a 680px width.
            Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
        -->
  <div style="max-width: 680px; margin: auto;">
    <!--[if mso]>
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
            <tr>
            <td>
            <![endif]-->

    <!-- Email Header : BEGIN -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">

      <!-- 3 Even Columns : BEGIN -->
      <tr>
        <td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
          <!--[if mso]>
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                        <tr>
                        <td align="center" valign="top" width="660">
                        <![endif]-->
          <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
            <tr>
              <td align="center" valign="top" style="font-size:0;">
                <!--[if mso]>
                                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                <div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;">
                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                      <td style="padding: 10px 10px;">
                        <p style="margin: 0; font-size: 15px;">Column 1 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                <div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;">
                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                      <td style="padding: 10px 10px;">
                        <p style="margin: 0; font-size: 15px;">Column 2 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                <div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;">
                  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                      <td style="padding: 10px 10px;">
                        <p style="margin: 0; font-size: 15px;">Column 3 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                      </td>
                    </tr>
                  </table>
                </div>
                <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
              </td>
            </tr>
          </table>
          <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
        </td>
      </tr>
      <!-- 3 Even Columns : END -->

    </table>
    <!-- Email Footer : END -->

    <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
  </div>
</center>
</body>
</html>

您还可以看到a full example here。

（您也可以使用Flexbox或CSS Grid实现此目的，但在电子邮件客户端中对此的支持是不稳定的。）

如何在没有媒体查询的情况下堆叠3个流体（响应）列

1 个答案: