gpt4 book ai didi

html - 如何在不影响其 sibling 位置的情况下绝对定位 flex 盒子中的 div?

转载 作者:太空狗 更新时间:2023-10-29 13:12:18 28 4
gpt4 key购买 nike

<分区>

我在 flex #container 中有一个 #text,我想在它下面放置一些东西:

is siblings的flex定位计算怎么能不考虑?

#container{
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
position: relative;
width: 95vw;
height: 95vh;
border: 1px solid black
}
#text{
font-size: 13px;
width: 50vw;
text-align: justify;
}
#absolute{
position: absolute;
bottom: 5px;
left: calc(47.5vw - 25px);
width: 50px;
text-align: center;
color: red;
}
<div id="container">
<div id="text">
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
</div>
<div id="absolute">
Absolutly
</div>
</div>

正如您会注意到的那样,#text 稍微向上倾斜父元素的中心,如果可能,我希望它完全垂直居中,而无需修改:

  • 节点树

  • 已经写入的 flex 属性(在多个 .text 元素的情况下作为 justify-content)

编辑:

我在这个问题上发现了另一个问题,尝试了没有结果的解决方案:Absolute positioned item in a flex container still gets considered as item in IE & Firefox

这似乎与 Firefox 和 IE 的错误有关(我目前运行的是 Firefox 47,它适用于 Chromium。)

最终编辑:

我推进了对这个主题的研究,发现了很多相关的问题(重复):

以及指向 Bugzilla 的直接链接.

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