首页 > 解决方案 > CSS 固定位置继承宽度不等于父级

问题描述

我有 3 个 div级、级和元素。div 元素具有从child继承的宽度。问题是子 div 的宽度等于 100%,而元素的宽度等于继承,这给了我:

在此处输入图像描述

这就是我要找的东西。

在此处输入图像描述

我尝试了不同的方法。但没有人工作。我不明白为什么元素不能从父 div 继承宽度 200px。

404 / 5000 翻译结果我有 3 个父、子和元素 div。div 元素具有从子元素继承的宽度,问题是子 div 的宽度为 100%,元素继承自 (100%) 并应用它,这给了我这个 /

这是我的代码:

.parent{
  padding: 2px;
  height:100px;
  width:30%;
  border:solid 2px red;
}
.child{
  padding: 2px;
  border:solid 2px green;
  width:100%;
  height:50px;
  position:relative;
}

.element1{
  padding: 2px;
  width:inherit;
  border:solid 2px yellow;
  position:fixed;
}
<div class="parent">
  <div class="child">
    child
    <div class="element1">
      element1  
  </div>
  </div>
</div>

标签: htmlcss

解决方案


除非父宽度为 100%,否则这不是正确的继承方法。但是此代码通过对子元素和元素应用宽度继承来解决您的问题。

  .parent {
        padding: 2px;
        height: 100px;
        width: 200px;
        border: solid 2px red;
    }

    .child {
        padding: 2px;
        border: solid 2px green;
        width: inherit;
        height: 50px;
        position: relative;
    }

    .element1 {
        padding: 2px;
        width: inherit;
        border: solid 2px yellow;
        position: fixed;
    }

推荐阅读