gpt4 book ai didi

html - 位置相对 div,包含彼此下方的绝对 div

转载 作者:行者123 更新时间:2023-11-27 23:17:40 25 4
gpt4 key购买 nike

我有多个相对定位的 div,每个包含 3 个绝对定位的 div。目前,它们显示为相互重叠,而不是在下方。

JSFiddle

如何将它们放在彼此下方?

每个父 div 如下所示。

<html>

  <div style="background: #F2F2F2; padding: 10px; border-radius: 50px; position: absolute; width: calc(100% - 30px); height: 15px;">

</div>

<div style="background: #2CA2B7; padding: 10px; border-radius: 50px; text-align: left; position: absolute; width: 20%; height: 15px;">

Item1

</div>

<div style="background: #D0CECE; padding: 10px; border-radius: 50px; text-align: left; right: 0%; position: absolute; width: 60%; height: 15px;">

Name1

</div>

</div>

最佳答案

你的父 div 的高度都为 0,因为他们所有的 child 都是绝对定位的,所以他们不占用任何空间。

解决方案是为父 div 添加高度...甚至更好地让它们 display: flex 并从 child 中删除绝对定位。

关于html - 位置相对 div,包含彼此下方的绝对 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58185918/

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