将绝对div居于相对父级内部，并具有动态宽度

编程问答 2022-06-10

问题描述

我需要将绝对元素（绿色）居中（从左到右）在相对容器（蓝色）内。子元素（绿色）需要具有动态/未设置的宽度。我宁愿不使用JavaScript（仅CSS和html）。

enter image description here

代码：

.relativeParent {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  overflow: visible;
  display: block;
  margin-left: 100px;
  margin-bottom: 20px;
}

.absoluteChild {
  display: block;
  background: green;
  position: absolute;
}
<div class="App">
  <div class='relativeParent'>
    <div class='absoluteChild'>test</div>
  </div>
  <div class='relativeParent'>
    <div class='absoluteChild'>asd asdf asdf asdf asdfa sdf</div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

absolutecss-positionhtml