首页猿问响应式相关元素调整大小 +...

响应式相关元素调整大小 + 响应式文本叠加

Java

慕莱坞森 2022-12-22 09:00:20

我在设计基于图像的下拉菜单时遇到了 2 个问题：无论我尝试多久，我都无法让flex容器中的 ed 元素保持与相邻元素相同的高度。[如果你看看我的jsFiddle，悬停显示的每个滑出内容应该与图标的高度相同。]我无法在每张图片上显示文字——我相信这是因为菜单会根据设备宽度自行调整大小——我不能放弃。我看到的所有来源都是基于position:absolute，我无法开始工作。[具体来说，每张图片的顶部都应该有文字，给它们贴上标签。]如果需要，请发表评论以进行澄清。这是jsFiddle 谢谢。

查看完整描述

1 回答

呼啦一阵风

TA贡献1802条经验获得超6个赞

为了清晰和代码回收，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) }

<div class="headline">Links of Links</div>

</div>

</div>

<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>

<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>

<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>

<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>

</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条评论

您需要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;

}

<h2>links of links</h2>

</div>

</header>

<p>the overlay</p>

</div>

</ul>

</div>

<p>the overlay</p>

</div>

</ul>

</div>

<p>the overlay</p>

</div>

</ul>

</div>

<p>the overlay</p>

</div>

</ul>

</div>

</main>

<p>footer text</p>

</div>

</footer>

</div>

反对回复 2022-12-22

1 回答
0 关注
91 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

响应式相关元素调整大小 + 响应式文本叠加

响应式相关元素调整大小 + 响应式文本叠加

1 回答

添加回答