gpt4 book ai didi

html - 图像 div 垂直重叠前面的 div

转载 作者:行者123 更新时间:2023-11-28 02:44:21 24 4
gpt4 key购买 nike

我有重叠 DIVS 的问题。尝试了几件事,但都没有提供预期的结果。我怀疑这很简单,但我缺少关键要素。

目前,bingo div 与数字 div 重叠。在许多屏幕上,数字 div 甚至不可见,因为 bingo div 占据了整个屏幕

HTML:

<body>
<div class="numbers" style="height:100%">
<h2>
What sort of number do you want?
</h2>
<a href="a-level/a1.html">Evens</a>
<a href="a-level/a2.html">Odds</a>
<a href="a-level/a3.html">Primes</a>
</div>

<div class="bingo">
</div>
</body>

CSS:

html{
font-size: 100%;
font-family: sans-serif;
}

h2{
margin:2rem;
}

h1{
margin:-2rem 0 2rem 2rem;
font-size: 4rem;
}

a{
margin: 0 0 0 2rem;
border:solid black 1px;
padding: 0.618rem 1rem;
text-decoration: none;
color:black;
}

a:hover{
color: white;
background-color: black;
}

img{
position: absolute;
bottom:0;
}

.bingo{
bottom:0;
margin: 4rem 0 0 0;
width: 100%;
height: auto;
overflow: hidden;
}

谢谢!

最佳答案

“数字”<div>从包含的元素、文本和 <a> 中获取高度;关键是 <a>元素是 inline其 CSS 高度就是文本行的高度。如果它们在屏幕上显示为矩形,那只是因为您设置了填充(未添加到父级 <div> 高度)。这导致“bingo”上的矩形重叠,但对于 CSS 高度,没有重叠。解决方案是“数字”<div>占据其中元素的整个高度,以便“下推”“宾果游戏”<div>使用:

a {
...
display: inline-block;
margin-bottom: 2rem;
}

我添加了一个底部边距,只是为了防止它们在调整屏幕大小时在单个列中时相互接触。

https://jsfiddle.net/hoq97sj5/1/

关于html - 图像 div 垂直重叠前面的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46995659/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com