如果屏幕尺寸小于指定值，则将水平块转换为垂直 [英] Convert horizontal block to vertical in case screen size smaller than a specified value
问题描述
在下面的代码中，如果容器的尺寸小于X像素（对于较小的设备或移动设备），我希望水平的三列块彼此叠放并堆叠。我应该如何以及在表的哪个元素上应用此属性。请注意，代码是内容块，所以我宁愿不要将CSS应用于整个电子邮件模板或电子邮件< body> ，除非这是唯一的方法解决了这个问题（类似于使用 @media only屏幕和（最大宽度：420px））。
In the following code, I would like the horizontal three-column block to drop and stack on top of each other in case the size of the container becomes less than X pixels (for smaller or mobile devices). How and on which element of the table should I apply this property. Mind that the code is a content block so I'd rather not have CSS that applies to the entire email template or the email <body> unless this is the only way that solves this problem (something like using @media only screen and (max-width: 420px)).
< a href = https://i.stack.imgur.com/uOAGl.png rel = nofollow noreferrer>
<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>
推荐答案
您是否希望布局仅 ？还是随着屏幕尺寸的减小，每个容器都可以换行到下一行？
Do you want the layout to only be three across or three down? Or can each container wrap to the next line as the screen size decreases?
当屏幕缩小时，您当前的代码只是简单地调整图像，文本和容器的大小。如果您只是希望容器随着屏幕缩小而包装，则可以使用< div> 标记和 float：left; 和最大宽度 CSS。
Your current code simply resizes the images, text, and containers when the screen is shrunk down. If you just want the containers to wrap as the screen shrinks, you can accomplish this by using <div> tags and float:left; and max-width CSS.
您遇到的主要问题是每个容器是一个完全独立的表，每个表都位于另一个表内的完全独立的表单元格中。
The main issue you're having is that each container is a completely separate table, each of which is in a completely separate table cell inside another table.
看看这个（运行代码片段并使用整页链接进行测试）：
Take a look at this (run the code snippet and use the Full Page link to test it out):
.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>
如果不是不是您要找的东西，请告诉我。
If this isn't what you're looking for, please let me know.
此外，仅供参考，您应该重新考虑代码的几个方面。具体来说，无论何时您指定尺寸，都应将其放入尺寸中。即 width = 1024 .... 1024是什么？如果是像素，请使用1024px。
再说一点，在< img> 元素中，您已经有CSS表示 width：100％; 。因此，同时具有 width = 1024 既多余又令人困惑。
Also, just an fyi, there are several areas of your code that you should rethink. Specifically, any time you're specifying a size, you should be putting the unit with it. i.e. width="1024"....1024 what? If it's pixels, use 1024px.
And to take that point a little further, in the <img> elements you already have CSS that says width: 100%;. So, also having width="1024" is redundant and confusing.
这篇关于如果屏幕尺寸小于指定值，则将水平块转换为垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
