绝对定位元素的最大宽度

生活

我有一个居中的div(使用绝对定位和变换:翻译(-50%, - 50%),为描述这里)。当子div的内容短时,一切正常。当内容较长时,子div宽度将限制为容器div的50%(可能是因为left设置为50%)。

有没有一种方法可以让子div仅在内容很长时才扩展到整个宽度?

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-left: auto; 
  margin-right: auto;
  border: 2px solid black;
}

.child {
  position: absolute;
  transform: translate(-50%, -50%);
  left:50%;
  top:50%;
  background:lightgreen;
}
<div class="container">
  <div class="child">short</div>
</div>

<div class="container">
  <div class="child">long long long long long long long</div>
</div>

编辑:我找到了一个解释,可以帮助我在答案中解决这个问题。

UncaughtTypeError

添加一个附加的嵌套元素,使您可以更好地控制相关元素的动态定位和缩放。

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-left: auto; 
  margin-right: auto;
  border: 2px solid black;
  box-sizing: border-box;
}

.child {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
}

.child-inner {
    background: lightgreen;
    left: 0;
    right: 0;
    display: inline-block;
}
<div class="container">
  <div class="child"><div class="child-inner">short</div></div>
</div>

<div class="container">
  <div class="child"><div class="child-inner">long long long long long long long</div></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章