responsive-design 相关问题

我正在做响应式邮件，我需要在表中制作响应式td（没有类或使用媒体查询）。简单地说 - 我需要在小型设备上将 td 排列在它们下面。我正在做响应式邮件，我需要在表中制作响应式td（没有类或使用媒体查询）。简单来说 - 我需要在小型设备上将 td 排列在它们下面。 <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;"> <tr> <td><a href="https://www.blahblah.com/"><img src="pic" /></a></td> <td><a href="https://blahblah2.com/><img src="pic" /></a></td> <td><a href="http://www.blahblah3.com/><img src="pic" /></a></td> <td><a href="http://www.blahblah4.com/><img src="pic" /></a></td> </tr> </table> 您可以对表格中的每一列尝试 display:inline-block。当屏幕宽度减小时，它会使列移动到每列下方。正如您所提到的，您不需要类，因此我为每列编写内联样式。试试这个代码： <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%; background-color: #fff; max-width: 600px;"> <tr> <td style="display: inline-block; padding: 5px;"> <p> hellohello</p> </td> <td style="display: inline-block; padding: 5px;"> <p> hellohello</p> </td> <td style="display: inline-block; padding: 5px;"> <p> hellohello</p> </td> <td style="display: inline-block; padding: 5px;"> <p> hellohello</p> </td> </tr> </table> 在这里摆弄您可以创建一个媒体查询来强制所有 td 元素在特定的屏幕宽度下彼此下降。这确保它们同时垂直对齐。如果您要生成打印报告，它还会保留表格的水平对齐打印格式。 @media only screen and (min-width: 0px) and (max-width: 700px) { td { display:inline-block; padding:5px; width:100%; } } 感谢您为 Stack Overflow 提供答案！请务必回答问题。提供详细信息并分享您的研究！但要避免…… 寻求帮助、澄清或回应其他答案。根据意见作出陈述；用参考资料或个人经验来支持它们。要了解更多信息，请参阅我们关于撰写精彩答案的提示。

responsive-design html-table mailing

回答 3 投票 0

如何在 HTML 和 CSS 中创建包含两行文本的响应式圆圈？

身体{ 显示：柔性；调整内容：居中；对齐项目：居中；间隙：15px； } 。圆圈 { 显示：柔性；弯曲方向：列；对齐项目：居中；调整内容：居中；

html css flexbox responsive-design aspect-ratio

回答 1 投票 0

在网页中的 div 中使用 REM 单位

我有一个页面使用 REM 单位和媒体查询。说inner.php 我将该页面包含到我的其他网页中假设outer.php包含inner.php。这里inner.php使用html字体大小......

css responsive-design

回答 4 投票 0

CSS非标准响应式图片框架

我正在尝试为新闻部分的图片实现一个非标准框架。我的想法是让图片的 z-index 低于框架，并将框架放在其顶部，并使它们响应...