我有3個div父，子和元素。div元素具有從子元素繼承的寬度。問題是子div的寬度等于100%,元素的寬度等于inherit，這給了我:

這是我要找的。

我嘗試了不同的方法。但是沒有人工作。我不明白為什么元素不能從父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>

除非父寬度是100%，否則這不是正確的繼承方法。但是這段代碼通過在子元素和元素上應用width inherit解決了這個問題。

.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;
    }

這僅僅用CSS是不可能的，但是使用幾行JavaScript就可以輕松完成。

步伐

監聽窗口大小調整事件。 調整大小時，使用clientWidth或offsetWidth屬性獲取父元素的寬度(以px為單位)。 設置固定位置子元素寬度。 應用任何手動偏移來說明填充/邊框等。注意:在這個例子中，我還設置了框的大小:邊框；以減少所需的偏移量。 窗口調整事件

客戶端寬度與偏移量寬度

function windowResized() {
    const child = document.querySelector(".child");
    document.querySelector(".element1").style.width = `${child.clientWidth-4}px`;
    // 4px = 2*2px child padding (right/left)
  }
 
 window.addEventListener("resize", windowResized);
 windowResized();

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

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

.element1{
  padding: 2px;
  border: solid 2px yellow;
  position: fixed;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
    child
    <div class="element1">
      element1  
  </div>
  </div>
</div>

這不是你具體要求的，但你要求的視覺效果確實提供了。我使用邊界框來限制父框中的內容。

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

.child {
  box-sizing: border-box;
  padding: 2px;
  border: solid 2px green;
  width: 100%;
  height: 50px;
}

.element1 {
  box-sizing: inherit;
  padding: 2px;
  width: inherit;
  border: solid 2px yellow;
}

<div class="parent">
  <div class="child">
    child
    <div class="element1">
      element1
    </div>
  </div>
</div>