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

【问题标题】：how to stack 3 fluid (responsive) columns without media queries如何在没有媒体查询的情况下堆叠 3 个流体（响应式）列
【发布时间】：2017-07-26 20:17:30
【问题描述】：

我想编写一个响应式流畅电子邮件模板，我可以在其中堆叠 3 列而不使用媒体查询。当宽度小于表格元素的两个最小宽度的总和时，我可以使用以下代码使它们浮动并让它们堆叠。但是当宽度超过这个值时，只有第三列是堆叠的，其余两列仍然是内联的。

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

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

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

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

问题：

预期解决方案：

【问题讨论】：

你的问题似乎没有意义。您正在使用一张桌子。如果要堆叠列，请将每个 td 标签放在它自己的 tr 标签内
它工作正常。 app.hyfy.io/v/abJONNTmF4U
@GCyrillus flexbox 在所有电子邮件客户端中都不受支持。中心只是为了测试，不在实际代码中
我很抱歉，我没有给予足够的关注；）

标签： html css media-queries html-email email-templates

【解决方案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 实现此目的，但电子邮件客户端对此的支持参差不齐。）

【讨论】：

编辑并添加了在 sn-p 中缺少的字体大小的重置。
我不知道 rem 值在 Outlook 中有效。稍后会测试它:-)
@GCyrillus 有趣，我通常不会在这里设置font-size。这个图是如何进入布局的？
@TedGoas 你在``这里有一个重置（第二个嵌合表）我猜是处理内联块元素产生的空白。我确实在每个 div （变成内联块）上重置了 1rem 的字体，但是像素值确实可能更防弹。
@GCyrillus 好点，忘了撤消font-size:0;。你说得对，px 更防弹，我已经更新了。由于级联在电子邮件中并不总是可靠的，因此我还将声明移至可能的最低标签。感谢您的帮助！