响应式相关元素调整大小 + 响应式文本叠加
我在设计基于图像的下拉菜单时遇到了 2 个问题：
无论我尝试多久，我都无法让
flex容器中的 ed 元素保持与相邻元素相同的高度。[如果你看看我的jsFiddle，悬停显示的每个滑出内容应该与图标的高度相同。]我无法在每张图片上显示文字——我相信这是因为菜单会根据设备宽度自行调整大小——我不能放弃。我看到的所有来源都是基于
position:absolute，我无法开始工作。[具体来说，每张图片的顶部都应该有文字，给它们贴上标签。]
如果需要，请发表评论以进行澄清。
这是jsFiddle 谢谢。
慕莱坞森浏览 95回答 1
1回答
-
呼啦一阵风
为了清晰和代码回收，CSS 被分成四个主要部分：全局变量、页面默认值和标准 HTML/CSS 值的覆盖机制、Flexbox 布局设置和元素大小/操作养眼的仿制药、间距、字体、边框吸引眼球的主题，任何与使用自定义属性相关的颜色[theme="gr-blue"]。可以很容易地与其他主题一起扩展。弹性盒布局对于 的左对齐和右对齐，.slideout-content您可以简单地使用row-reversedirection 和odd和evenjustify-content: flex-end的默认方向 .menu-itemrow .menu-item图片文字叠加使用标准position: relative和absolute父/子元素构造。孩子content充满了从自定义属性获得的覆盖文本。data-overlay评论该代码有大量注释，并显示了 Flexbox 布局的一些替代用途。已删除filter: brightness(1.2)，因为 IE11 无法处理此问题，需要一些替代方法。我稍微改变了颜色的不透明度.slideout-content以显示一些悬停效果。在适用的情况下，我添加了取决于视口的尺寸。删除所有对子项的使用，并在适用的情况下margin将间距移至父项。padding当将相对大小 ('%') 与 结合使用时，这一点尤其重要box-sizing: border-box，因为margin子项的大小会增加到超过 100%。不要flex: 1用于允许元素增长，flex-grow: 1而是用于 IE11。更改dir="ltr"为<body>以dir="rtl"测试文档阅读顺序。经测试可与 Chrome/Edge、Firefox 和 IE11 一起使用，最小尺寸为 320x480px，无需滚动。更新 1我忘了提到我删除了原始footer {...height: 5vh...}内容，它的内容不够高，因此会溢出，在页脚下方创建一个白色条。如果您不希望页脚（或与此相关的任何父元素）溢出，它height的高度必须至少大于/等于其子元素（ren）（计算line-height + padding + border + margin=>是否添加padding + border取决于box-sizing）。更新 2.slideout::after为了在 parent use: 中从顶部和中心定位覆盖3/4 .slideout::after { top: 75%; left: 50%; transform: translate(-50%, -50%) }，我相应地修改了 CSS。查看w3schools：CSS 布局 - 水平和垂直对齐以获取有关定位的更多信息。/***********//* GLOBALS *//***********/html,body { width: 100%; max-width: 100%; height: 100% }html { -webkit-box-sizing: border-box; box-sizing: border-box }*, *:before, *:after{ -webkit-box-sizing: inherit; box-sizing: inherit }/* remove/override default element default */html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }body { margin: 0 }ul,li { list-style-type: none; padding: 0; margin: 0 }a { text-decoration: none; color: inherit }p { margin: 0; padding: 1em 0 }/* for debugging (put in <body>) */[outlines="1"] * { outline: 1px dashed }/*************//* MECHANISM *//*************//******************//* Flexbox Layout *//******************//* FBL EITHER (specific) *//*.wrapper, .touch-menu, .menu-item,.menu-item * { display: flex }/**//* FBL OR (generic, if you want to insert elements on-the-fly without classes) */div, ul, li, a, img { display: flex }/**//* .wrapper is an FBL column of three main rows, pushed apart */.wrapper { flex-direction: column; justify-content: space-between }/* .touch-menu fills available space and is a row that wraps its kids */.touch-menu { flex-grow: 1; flex-flow: row wrap }/* Because .menu-item width is 50% there will always be only two in a row, simply reverse FBL for first in a row...*/.menu-item:nth-child(odd) { flex-direction: row-reverse } /* reverse row logic */.menu-item:nth-child(odd)>* { justify-content: flex-end } /* ditto */.slideout-content { flex-grow: 1 } /* grow to fill parent */.slideout-content ul { flex-direction: column } /* a column of several rows */.touch-menu,.slideout-content *, /* center all content rows/columns */.header>*,.footer>* { justify-content: center; align-content: center; align-items: center }.footer>* { justify-content: flex-end } /* right align footer rows *//**********//* Action *//**********/.slideout-content { display: none } /* hide, change to 'flex' to verify positioning */.slideout:hover+.slideout-content,.slideout-content:hover { display: flex } /* show on hover *//**********//* Sizing *//**********/.wrapper { width: 100%; height: 100% }.touch-menu { padding: 0 5% }/* modify 5% to required need, forces size of entire .menu-item */.menu-item { width: 50% } /* of .touch-menu */.slideout { width: 50%; position: relative } /* of .menu-item */.slideout::after { position: absolute; bottom: 0; left: 0; right: 0 }/* UPDATE 2 */.slideout::after { top: 75%; left: 50%; transform: translate(-50%, -50%) }/* redundant, but > 50% will animate .slideout on hover */.slideout-content { width: 50% } /* otherwise: remove *//* fill parent */.header>*, .footer>*,.slideout img { width: 100% }.slideout-content * { width: 100%; height: 100% } /* modify to your needs *//**********************//* EYE-CANDY generics *//**********************/.header { border-bottom-style: inset }.header .headline { padding: 0.67em 0; font-size: 2.6vw; font-weight: bold }.touch-menu .menu-item { padding: 1vh }.slideout { cursor: pointer }.slideout::after { content: attr(data-overlay); font-size: .75vw; padding: .25vw }.slideout-content { font-size: 1.5vw; padding: .25vw; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) }.slideout-content ul * { border-radius: 0.5vw } .slideout-content li { padding: .125vw }.slideout-content a { border: thin inset }.footer { padding: 2.65vmin .75vw; font-size: .75vw; border-top: outset }/* ONLY required when 'FBL EITHER' used */.header { text-align: center }.footer { text-align: right }/*********************//* EYE-CANDY theming *//*********************/body { font-family: "Lato", sans-serif }body[theme="gr-blue"] { color: GoldenRod; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c7d7dd+0,a7cfdf+16,5085a0+57,23538a+100 */ background-color: rgb(199,215,221); /* Old browsers */ background-image: -moz-linear-gradient(top, rgba(199,215,221,1) 0%, rgba(167,207,223,1) 16%, rgba(80,133,160,1) 57%, rgba(35,83,138,1) 100%); /* FF3.6-15 */ background-image: -webkit-linear-gradient(top, rgba(199,215,221,1) 0%, rgba(167,207,223,1) 16%, rgba(80,133,160,1) 57%, rgba(35,83,138,1) 100%); /* Chrome10-25,Safari5.1-6 */ background-image: linear-gradient(to bottom, rgba(199,215,221,1) 0%, rgba(167,207,223,1) 16%, rgba(80,133,160,1) 57%, rgba(35,83,138,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7d7dd', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */}[theme="gr-blue"] .header { color: AliceBlue; background-color: #605e5e; border-bottom-color: #888888 }[theme="gr-blue"] .footer { background-color:#605e5e; border-color: GoldenRod }[theme="gr-blue"] .slideout::after { color: AliceBlue; background-color: rgba(115,110,111,.6) }[theme="gr-blue"] .slideout-content { background-color: rgba(115,110,111,.6) } /* #736e6f */[theme="gr-blue"] .slideout-content a { border-color: #888585 }[theme="gr-blue"] .slideout-content li:hover { background-color: rgba(115,110,111,.6) }<body theme="gr-blue" dir="ltr" outlines="0"><div class="wrapper"> <div class="header"> <div class="headline">Links of Links</div> </div> <div class="touch-menu"> <div class="menu-item"> <div class="slideout" data-overlay="overlay 1"> <img src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> </div> <div class="slideout-content"> <ul> <li><a href="#">scaleLink 1</a></li> <li><a href="#">scaleLink 2</a></li> <li><a href="#">scaleLink 3</a></li> </ul> </div> </div> <div class="menu-item"> <div class="slideout" data-overlay="overlay 2"> <img src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> </div> <div class="slideout-content"> <ul> <li><a href="#">bookLink 1</a></li> <li><a href="#">bookLink 2</a></li> <li><a href="#">bookLink 3</a></li> <li><a href="#">bookLink 4</a></li> <li><a href="#">bookLink 5</a></li> <li><a href="#">bookLink 6</a></li> </ul> </div> </div> <div class="menu-item"> <div class="slideout" data-overlay="overlay 3"> <img src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> </div> <div class="slideout-content"> <ul> <li><a href="#">ugavelLink 1</a></li> <li><a href="#">ugavelLink 2</a></li> <li><a href="#">ugavelLink 3</a></li> <li><a href="#">ugavelLink 4</a></li> </ul> </div> </div> <div class="menu-item"> <div class="slideout" data-overlay="overlay 4"> <img src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> </div> <div class="slideout-content"> <ul> <li><a href="#">lgavelLink 1</a></li> <li><a href="#">lgavelLink 2</a></li> <li><a href="#">lgavelLink 3</a></li> </ul> </div> </div> </div> <div class="footer"> <div> Powered by <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=emb_logo" target="_blank">Barack Obama</a> </div> </div></div></body>展开片段分享编辑跟随于 2020 年 8 月 20 日 14:09编辑2020 年 8 月 17 日 1:32 回答Rene van der Lende 的用户头像范德朗德3,69411 个金徽章1313枚银徽章2323个青铜徽章几乎完美。只有一件事：页面底部有一个白色条，我需要背景从页眉一直延伸到页脚。 – 外切银 2020 年 8 月 19 日 13:58<footer>您是否再次更改了to的高度5vh？因为5vh它的内容不够高并且会溢出，所以下面的白色条（由于<p>高度和边距）。计算：父母身高必须 >= child(ren) line-height+ padding+ margin。抱歉，我实际上忘了提及我删除的原因footer.height。 – 范德朗德 2020 年 8 月 19 日 15:15 我实际上认为问题在于渐变背景突然切断，这让我认为这是页脚高度的问题。 – 外切银 2020 年 8 月 20 日 2:30我发布的版本（再次测试）不显示页脚下方的白条，仅在调整大小时完全可以接受（Firefox 轻微的白色，屏幕底部的 Chrome/Edge 空白行，取决于浏览器渲染图形，我猜). 然而，关于页脚高度的评论5vh仍然是正确的，我注意到这是第一次运行你的版本。background-attachment如果渐变给您带来任何麻烦，请尝试其和的各种选项background-size。 – 范德朗德 2020 年 8 月 20 日 2:52还有一件事：当所有覆盖文本的大小不同时，如何将覆盖居中到顶部的 3/4 到中心？ – 外切银 2020 年 8 月 20 日 3:19显示1条评论1您需要menu-top显示 asflex以使其内容伸展。对于图像上的叠加层，position: absolute规则是正确的，但它还需要top right bottom left声明其中一个定位规则，并且它的父级有relative位置。我已经根据您的描述创建了一个基于 flexbox 的片段。请注意，我没有使用任何列，而是子项在 50% 上换行，我:nth-child(odd)用来选择奇数子项和order: 1/或order: 2相应的规则以向左或向右显示菜单。另请注意，我.page__wrap在 div 上使用了一个类来包装整个页面、页眉、主体和页脚，以便将它们弯曲，这样即使没有滚动，页脚也始终位于底部。body { margin: 0;}.page__wrap { display: flex; flex-direction: column; min-height: 100vh;}header { background-color: lightgray; border-bottom: 5px solid gray;}h2 { text-align: center; margin: 0; padding: 2em 0;}main { flex: 1;}footer { background-color: gold; padding: 1em 0; justify-self: flex-end;}.slideouts__wrapper { display: flex; flex-wrap: wrap; max-width: 65rem; margin: 0 auto;}.slideout { display: flex; margin: 10px; width: calc(50% - 20px); justify-content: flex-start;}.slideout:nth-child(odd) { justify-content: flex-end;}.slideout__avatar { background-color: red; flex: 0 1 auto; object-fit: cover; position: relative;}.slideout__avatar--image { display: block; width: 100%}.slideout__avatar--overlay { position: absolute; bottom: 0; width: 100%; background-color: #00000095; color: white; transition: .2s; display: flex; justify-content: center; align-items: center;}.slideout:nth-child(odd) .slideout__avatar { order: 2; position: relative;}.slideout__menu { display: flex; flex: 0 0 50%;}.slideout__menu--items { display: none; flex-direction: column; justify-content: stretch; margin: 0; padding:0; flex: 1; list-style: none; background-color: #736E6F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 1%;}.slideout__menu--item { flex: 1; display: flex; border: thin inset #888585; border-radius: 5%;}.slideout__menu--item:hover { filter: brightness(1.2);}.slideout__menu--item--anchor { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; color: goldenrod;}.slideout__avatar:hover + .slideout__menu .slideout__menu--items { display: flex;}.slideout__avatar:hover .slideout__avatar--overlay { opacity: 1;}.slideout__menu--items:hover { display:flex;}<div class="page__wrap"> <header> <div class="header__container"> <h2>links of links</h2> </div> </header> <main class="slideouts__container"> <div class="slideouts__wrapper"> <div class="slideout"> <div class="slideout__avatar"> <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> <div class="slideout__avatar--overlay"> <p>the overlay</p> </div> </div> <div class="slideout__menu"> <ul class="slideout__menu--items"> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li> </ul> </div> </div> <div class="slideout"> <div class="slideout__avatar"> <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> <div class="slideout__avatar--overlay"> <p>the overlay</p> </div> </div> <div class="slideout__menu"> <ul class="slideout__menu--items"> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 3</a></li> </ul> </div> </div> <div class="slideout"> <div class="slideout__avatar"> <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> <div class="slideout__avatar--overlay"> <p>the overlay</p> </div> </div> <div class="slideout__menu"> <ul class="slideout__menu--items"> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 3</a></li> </ul> </div> </div> <div class="slideout"> <div class="slideout__avatar"> <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale"> <div class="slideout__avatar--overlay"> <p>the overlay</p> </div> </div> <div class="slideout__menu"> <ul class="slideout__menu--items"> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 3</a></li> <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 4</a></li> </ul> </div> </div> </div> </main> <footer> <div class="footer__container"> <p>footer text</p> </div> </footer></div>
随时随地看视频慕课网APP
相关分类
Java