gpt4 book ai didi

javascript - DIV 祖 parent 的 100% 宽度,而祖 parent 的宽度不是 100% 视口(viewport)

转载 作者:行者123 更新时间:2023-12-01 17:45:33 25 4
gpt4 key购买 nike

我在这里找到了一些解决方案,但他们都假设祖 parent 有 100vw,这不是我的情况。

这是我想要实现的目标:

<body>
<div id="grandparent" style="width: 1000px">
<div id="parent" style="width: 500px">
<div id="child" style="width: grandparent"></div>
</div>
</div>
</body>

实际上我需要将 child 的宽度与第 5 级祖 parent 的宽度对齐。如果纯 CSS 绝对不可能,那么我会感谢 JS 解决方案。

但 CSS 更可取。

最佳答案

设置position: relative关于祖 parent 和 position: absolute在子元素上应该可以解决问题。但请记住,祖 parent 和 child 之间不应该有任何其他相对定位的元素。考虑下面的代码:

#grandparent1 {width: 1000px; position: relative; background: yellow;}
#grandparent2 {width: 200px; background: pink;}
#grandparent3 {width: 300px; background: grey;}
#grandparent4 {width: 400px; background: orange;}
#grandparent5 {width: 100px; background: aqua;}

#parent {width: 500px; background: pink;}
#child {width: 100%; background: red; position: absolute;}
<div id="grandparent1">
Grand Parent #1

<div id="grandparent2">
Grand Parent #2

<div id="grandparent3">
Grand Parent #3

<div id="grandparent4">
Grand Parent #4

<div id="grandparent5">
Grand Parent #5

<div id="parent">
Parent

<div id="child">
Child
</div>

</div>

</div>
</div>
</div>
</div>
</div>

关于javascript - DIV 祖 parent 的 100% 宽度,而祖 parent 的宽度不是 100% 视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37380735/

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