在下面的代码中，我希望水平三列块放置并堆叠在彼此之上，以防容器的大小小于 X 像素（对于较小或移动设备）。我应该如何以及在表的哪个元素上应用此属性。请注意，代码是一个内容块，因此我不想将 CSS 应用于整个电子邮件模板或电子邮件<body>除非这是解决这个问题的唯一方法（比如使用@media only screen and (max-width: 420px)).
<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">
<!-- Title: BEGIN-->
<tr>
<td>
<h2>Title</h2>
</td>
</tr>
<!-- Title: END-->
<tr>
<td>
<table cellpadding="20">
<tr>
<td style="background-color: #ffffff;" width="32%">
<table>
<tr>
<td>
<h3>Lorem ipsum </br>dolor sit</h3>
</td>
</tr>
<tr>
<td>
<a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
width="1024"></a></td>
</tr>
<tr>
<td>
Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
</td>
</tr>
</table>
</td>
<td>
</td>
<td style="background-color: #ffffff;" width="32%">
<table>
<tr>
<td>
<h3>Lorem ipsum </br>dolor sit</h3>
</td>
</tr>
<tr>
<td>
<a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
width="1024"></a></td>
</tr>
<tr>
<td>
Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
</td>
</tr>
</table>
</td>
<td>
</td>
<td style="background-color: #ffffff;" width="32%">
<table>
<tr>
<td>
<h3>Lorem ipsum </br>dolor sit</h3>
</td>
</tr>
<tr>
<td>
<a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
width="1024"></a></td>
</tr>
<tr>
<td>
Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30">
</td>
</tr>
</table>
你想要的布局是only横三还是下三？或者随着屏幕尺寸的减小，每个容器可以换行到下一行吗？
当前的代码只是在屏幕缩小时调整图像、文本和容器的大小。如果您只想让容器随着屏幕缩小而换行，您可以通过使用来完成此操作<div>标签和float:left; and max-width CSS.
您遇到的主要问题是每个容器都是一个完全独立的表，每个容器都位于另一个表内完全独立的表格单元格中。
看一下（运行代码片段并使用整页链接进行测试）：
.container {
background-color: #ffffff;
max-width: 300px;
float: left;
margin: 10px;
padding: 20px;
}
<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">
<!-- Title: BEGIN-->
<tr>
<td>
<h2>Title</h2>
</td>
</tr>
<!-- Title: END-->
<tr>
<td>
<div class='container'>
<h3>Lorem ipsum </br>dolor sit</h3>
<a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
</div>
<div class='container'>
<h3>Lorem ipsum </br>dolor sit</h3>
<a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
</div>
<div class='container'>
<h3>Lorem ipsum </br>dolor sit</h3>
<a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
</div>
</td>
</tr>
<tr>
<td height="30">
</td>
</tr>
</table>
如果这不是您要找的，请告诉我。
另外，仅供参考，您应该重新考虑代码的几个区域。具体来说，任何时候指定尺寸时，都应该将单位放在一起。 IE。width="1024"....1024 什么？如果是像素，则使用 1024px。
为了进一步阐述这一点，<img>你已经有CSS的元素说width: 100%;。所以，也有width="1024"是多余和混乱的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
