如果屏幕尺寸小于指定值，则将水平块转换为垂直块 [英] Convert horizontal block to vertical in case screen size smaller than a specified value
问题描述
在下面的代码中，如果容器的大小小于 X 像素(对于较小的或移动设备)，我希望水平的三列块相互叠加.我应该如何以及在表格的哪个元素上应用此属性.请注意，代码是一个内容块，所以我宁愿没有适用于整个电子邮件模板或电子邮件 <body> 的 CSS，除非这是解决此问题的唯一方法(类似于使用 @media only screen and (max-width: 420px)).
<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,无衬线；最小宽度:宽度 500 像素；背景颜色:#f6f4f0；"><!-- 标题:开始--><tr><td><h2>标题</h2></td></tr><!-- 标题:结束--><tr><td><table cellpadding="20"><tr><td style="背景颜色:#ffffff;"宽度="32%"><表格><tr><td><h3>Lorem ipsum </br>dolor sat</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 非 ipsum quis ullamcorper.Donec et purus mi.Nunc et auctor lacus.</td></tr></td><td></td><td style="背景颜色:#ffffff;"宽度="32%"><表格><tr><td><h3>Lorem ipsum </br>dolor sat</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 非 ipsum quis ullamcorper.Donec et purus mi.Nunc et auctor lacus.</td></tr></td><td></td><td style="背景颜色:#ffffff;"宽度="32%"><表格><tr><td><h3>Lorem ipsum </br>dolor sat</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 非 ipsum quis ullamcorper.Donec et purus mi.Nunc et auctor lacus.</td></tr></td></tr></td></tr><tr><td height="30"></td></tr></table>您希望布局仅是三横还是三横?或者每个容器可以随着屏幕尺寸的减小而换到下一行吗?
您当前的代码只是在屏幕缩小时调整图像、文本和容器的大小.如果您只想在屏幕缩小时将容器包裹起来，您可以使用
float:left; 和 max-width CSS.您遇到的主要问题是每个容器都是一个完全独立的表格，每个容器都位于另一个表格内完全独立的表格单元格中.
看看这个(运行代码片段并使用整页链接来测试它):
.container {背景色:#ffffff；最大宽度:300px；向左飘浮;边距:10px；填充:20px；}<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,无衬线；最小宽度:宽度 500 像素；背景颜色:#f6f4f0；"><!-- 标题:开始--><tr><td><h2>标题</h2></td></tr><!-- 标题:结束--><tr><td><div class='container'><h3>Lorem ipsum </br>dolor sat</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 非 ipsum quis ullamcorper.Donec et purus mi.Nunc et auctor lacus.<div class='container'><h3>Lorem ipsum </br>dolor sat</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 非 ipsum quis ullamcorper.Donec et purus mi.Nunc et auctor lacus.
<div class='container'><h3>Lorem ipsum </br>dolor sat</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 非 ipsum quis ullamcorper.Donec et purus mi.Nunc et auctor lacus.
</td></tr><tr><td height="30"></td></tr></table>
如果这不是您要找的，请告诉我.
另外，仅供参考，您应该重新考虑代码的几个方面.具体来说，每当您指定尺寸时，您都应该将单位放在一起.即 width="1024"....1024 什么?如果是像素，请使用 1024px.更进一步，在 <img> 元素中，您已经有 CSS 表示 width: 100%;.因此，还有 width="1024" 是多余且令人困惑的.
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)).
<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?
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.
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屋！
