如何在没有媒体查询的情况下堆叠 3 个流体（响应式）列
Ari*_*ant 0 html css html-email email-templates media-queries
我想编写一个响应式流体电子邮件模板，在其中我可以在不使用媒体查询的情况下堆叠 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/
问题：
预期解决方案：
您可以在每个电子邮件客户端中安全地实现此目的，使用混合方法为电子邮件客户端的不同屏幕尺寸重新配置布局，无论媒体查询支持如何。它的核心是使用max-width和min-width强加基线（允许一些移动），并为 Outlook 强加一个固定的、宽的宽度，无论如何，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>您还可以在此处查看完整示例。
（您也可以使用 Flexbox 或 CSS Grid 来实现此目的，但电子邮件客户端对此的支持很不稳定。）
- @GCyrillus 是的，好点，忘记撤消`font-size:0;`。你是对的，`px` 更防弹，我已经更新了。我还将声明下移到尽可能低的标签，因为级联在电子邮件中并不总是可靠。感谢您的帮助！ (2认同)