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 低于框架，并将框架放在其顶部，并使它们响应...

html css responsive-design responsive

回答 1 投票 0

如何将在视图中的一个字段中输入的值以不同的形式显示为Lotus Notes中以不同形式的另一个字段中的下拉选项

如何将在表单视图中的一个字段中输入的值显示为另一字段中不同表单但在 Lotus Notes 中同一数据库中的下拉选项。我尝试创建一个隐藏字段...

responsive-design lotus-notes

回答 1 投票 0

响应高度，全高背景

https://chuk-norris-jokes.onrender.com/ 我想将的背景颜色：rgba(0, 0, 0, 0.5)拉伸到屏幕的整个高度。 https://chuk-norris-jokes.onrender.com/ 我想将的背景颜色：rgba(0, 0, 0, 0.5) 拉伸到屏幕的整个高度。获得“overlay”类 onclick。但是当笑话块很多时，高度就不会拉伸到全高。当高度静态时一切正常。媒体屏幕 820px-1280px 出现问题 (https://i.sstatic.net/4i63WcLj.png) (https://i.sstatic.net/lGSkyjS9.png) 我尝试设置 body {height: 100vh 或 100%} 我也设置了 .overlay{min-height:100vh 或 100%}。但是当水平滚动出现body和overlay时就不会拉伸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chuck Norris Jokes</title> </head> <body> <div id="overlay"></div> <div class="main_wrapper " id="mainWrapper"> <div class="content_wrapper"> <header class="header" id="header"> </header> <div class="title_wrapper" id="titleWrapper"> </div> <div class="form_wrapper" id="formWrapper"> </div> <div class="jokes_wrapper" id="jokesWrapper"> </div> </div> </div> <div class="sidebar hide" id="sideBar"> <h3 class="sidebar_title">Favorite</h3> <div class="favorite_jokes_wrapper" id="favJokesWrap"> </div> </div> </body> </html> body,html{ @apply min-h-screen; overflow: auto; } .main_wrapper{ @apply p-5 overflow-auto container min-h-full m-auto w-full relative md:m-auto md:p-2 md:pt-5 xl:max-w-[960px] xl:m-0; .content_wrapper{ @apply xl:max-w-[600px] xl:m-auto } }; .overlay{ @apply w-full absolute top-0 left-[-32px] bottom-0 right-0 min-h-full pointer-events-auto ; z-index: 2; background-color: rgba(0, 0, 0, 0.5);} .sidebar{ @apply container bg-light_grey absolute z-10 top-0 min-h-screen right-0 md:w-[56%] xl:block max-w-[480px];} .sidebar_title{ @apply hidden xl:block xl:m-10 font-medium text-xl text-sub_main_color; } .favorite_jokes_wrapper{ @apply flex flex-col mt-16 items-center justify-center min-h-full bg-light_grey xl:mt-5; .joke { @apply bg-white rounded-xl gap-5 md:pt-12 md:px-5 md:pb-5; border: 1px solid #F8F8F8; box-shadow: 0px 4px 6px 0px #0000001A; div{ @apply md:w-[298px]; } p { @apply text-sm font-normal; } h3{ @apply mt-0 bg-light_grey mt-2 text-10px ; } } } ` 这是因为 100vh 意味着 100 视口高度，当您滚动 overlay 高度不会改变并随着 main_wrapper 滚动时，我认为您需要的是将覆盖层固定在屏幕左侧，这样它就不会不随内容一起滚动解决方案是使用 fixed 代替 absolute 参考：

css responsive-design height

回答 1 投票 0

使用 CSS flex 平行排列行列

我正在尝试的是“您的隐私”，说明和按钮应在同一行对齐。 HTML： ... 我正在尝试的是，“您的隐私”，描述和按钮应该在同一行对齐。 HTML： <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p> <div class="cn-ok"> <a href="#" class="cm-link cn-learn-more">Decline</a> <div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div> </div> </div> </div> CSS： .cn-body { display: flex; flex-direction: column; font-family: myriad-pro, sans-serif; gap: 0; padding: 0; width: 100%; padding: 40px 113px; boder: 1px solid red; margin: 10px; } .cm-btn-danger { display: none; } .cn-ok { align-items: center; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: end; margin-top: 20px } 这是代码：代码我们可以使用 justify-content: start 来对齐按钮！ .cn-body { display: flex; flex-direction: column; font-family: myriad-pro, sans-serif; gap: 0; padding: 0; width: 100%; padding: 40px 113px; boder: 1px solid red; margin: 10px; } .cm-btn-danger { display: none; } .cn-ok { align-items: center; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: start; margin-top: 20px } <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span> </p> <div class="cn-ok"> <a href="#" class="cm-link cn-learn-more">Decline</a> <div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div> </div> </div> </div> 您可以在 align-items: flex-start 上添加 .cn-body，这样就可以了。 .cn-body { display: flex; flex-direction: column; font-family: myriad-pro, sans-serif; gap: 0; padding: 0; width: 100%; padding: 40px 113px; boder: 1px solid red; margin: 10px; align-items:flex-start; } .cm-btn-danger { display: none; } .cn-ok { align-items: center; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: end; margin-top: 20px } <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p> <div class="cn-ok"> <a href="#" class="cm-link cn-learn-more">Manage Preferences</a> <div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div> </div> </div> </div>

html css flexbox responsive-design responsive

回答 2 投票 0

如何使用boostrap在移动设备中隐藏div？

我想在所有移动设备中隐藏下面的div 我已经尝试过以下建议，但没有任何效果：缺少可见的-** ...

html css twitter-bootstrap responsive-design

回答 3 投票 0

为什么当我展开浏览器时我的网站没有响应

下面我附上了我的 CSS，我的网页是一个音频播放器、一个嵌入式 Twitter 链接和一些视频的混合体。当我在 iPhone 上打开网页时，项目显示居中，但是当我

css flexbox responsive-design

回答 1 投票 0

在屏幕右上角放置一个响应圆圈

我想在右上角画一个圆圈。我很难让它做出响应。我尝试了这段代码，但似乎没有任何效果。此代码导致响应中水平滚动...