我在設計基于圖像的下拉菜單時遇到了 2 個問題：無論我嘗試多久，我都無法讓flex容器中的 ed 元素保持與相鄰元素相同的高度。[如果你看看我的jsFiddle，懸停顯示的每個滑出內容應該與圖標的高度相同。]我無法在每張圖片上顯示文字——我相信這是因為菜單會根據設備寬度自行調整大小——我不能放棄。我看到的所有來源都是基于position:absolute，我無法開始工作。[具體來說，每張圖片的頂部都應該有文字，給它們貼上標簽。]如果需要，請發表評論以進行澄清。這是jsFiddle 謝謝。
1 回答
呼啦一陣風
TA貢獻1802條經驗 獲得超6個贊
為了清晰和代碼回收，CSS 被分成四個主要部分：
全局變量、頁面默認值和標準 HTML/CSS 值的覆蓋
機制、Flexbox 布局設置和元素大小/操作
養眼的仿制藥、間距、字體、邊框
吸引眼球的主題，任何與使用自定義屬性相關的顏色
[theme="gr-blue"]?？梢院苋菀椎嘏c其他主題一起擴展。
彈性盒布局
對于 的左對齊和右對齊，.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>
添加回答
舉報
0/150
提交
取消