如何在没有媒体查询的情况下堆叠3个流动(响应)柱 [英] how to stack 3 fluid (responsive) columns without media queries
本文介绍了如何在没有媒体查询的情况下堆叠3个流动(响应)柱的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想编写一个响应流畅的电子邮件模板，在其中我可以堆叠3列，而不使用媒体查询。当表格元素的宽度小于两个最小宽度之和时，我可以使用以下代码使它们浮动并堆叠。但当宽度大于该宽度时，只有第三列被堆叠，其余两列仍可看到内联。
如何在不使用媒体查询的情况下堆叠它们？如果有可能的话。 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 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>JsFdle：https://jsfiddle.net/o8gov8oe/
问题：预期解决方案：
推荐答案
您可以在每个电子邮件客户端中安全地实现这一点，您可以使用混合方法为电子邮件客户端重新配置不同屏幕大小的布局，而不考虑媒体查询支持。在其核心，它使用max-width和min-width来设置基线(允许一些移动)，并为被束缚在桌面上的Outlook强加一个固定的、宽的宽度。一旦设置了移动友好的基准，媒体查询就可以在支持它的客户端逐步增强电子邮件，但不需要堆叠专栏。
以下是一个没有媒体查询的三列堆叠示例：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
<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网格来实现这一点，但电子邮件客户端对此的支持参差不齐。)
这篇关于如何在没有媒体查询的情况下堆叠3个流动(响应)柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
