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

-1

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

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

  table { 
 
      } 
 
      tr{ 
 
      \t background-color: lightblue; 
 
\t \t \t 
 
       min-width: 160px; 
 
      } 
 
      td{ 
 
      \t 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> 
 
     \t 
 
     </table>

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

问题：

预期解决方案：

来源

2017-07-26 Arihant

你的问题似乎并没有什么意义。你正在使用一张桌子。如果你想堆叠列使每个td标签内部它自己的tr标签 – DCR

它工作正常。 https://app.hyfy.io/v/abJONNTmF4U/ – Nimish

@Gyryrillus flexbox不支持所有电子邮件客户端。中心只是为了测试，而不是在实际的代码 – Arihant

您可以在每个电子邮件客户端使用混合方法安全地实现此目的，以便为电子邮件客户端重新配置不同屏幕尺寸的布局，而不受媒体查询支持的限制。它的核心是使用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网格，但是对于支持的电子邮件客户端是参差不齐。）

来源

2017-07-26 20:56:45

编辑并添加了一个字体大小的重置，这是缺少的片段。 –

我不知道远景价值工作。稍后再测试一下:-) – Syfer

@GCyrillus有趣的是，我通常不会在这里设置一个'font-size'。这如何影响布局？ –

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

回答

相关问题