我想编写一个响应式流畅的电子邮件模板，我可以在其中堆叠 3 列而不使用媒体查询。当宽度小于表格元素的两个最小宽度之和时，我可以使用以下代码使它们 float 并堆叠。但是当宽度超过这个宽度时，只有第三列被堆叠起来，其余两列仍然是内联的。
如何在不使用媒体查询的情况下堆叠它们？如果可能的话。
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。一旦设置了移动友好基线，媒体查询就可以在支持它的客户端中进一步增强电子邮件，但不需要使列堆叠。
这是一个没有媒体查询的三列堆叠示例:
<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 实现此目的，但电子邮件客户端对此的支持参差不齐。)
关于html - 如何在没有媒体查询的情况下堆叠 3 个流体(响应)列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45336628/