如何獲取具有繼承寬度的元素的寬度？

Question

我有一個快速響應的網站。 我還有一些嵌套元素，它們使用百分比（ % ）寬度。 現在我想得到一個子元素的寬度，並將其設置為另一個元素的寬度。

注意：我可以獲得我需要的元素的寬度，並使用JavaScript將其設置為另一個元素（類似這樣： $('.children')[0].getBBox().width; ）。 但我想知道，我可以使用純CSS嗎？

這是我的HTML結構和CSS代碼：

 #grandfather { width: 70%; border: 1px solid #666; padding: 5px; } .father { width: 80%; border: 1px solid #999; padding: 5px; } .children { width 90%; border: 1px solid #ccc; padding: 5px; } .follow-width { position: absolute; border: 1px solid #ccc; padding: 5px; /* width: ? */ } 

 <div id="grandfather"> <div class="father"> <div class="children">how to get the width of this element?</div> </div> </div> <br> <hr> <br> <div class="follow-width"> this element needs to the width of div.children </div> 

Answer 1

不，你不能只在CSS中這樣做。

但是你可以在Internet Explorer 8之前的版本中使用它：

width: expression(document.getElementById("grandfather").style.width);

 #grandfather { width: 70%; border: 1px solid #666; padding: 5px; } .father { width: 80%; border: 1px solid #999; padding: 5px; } .children { width 90%; border: 1px solid #ccc; padding: 5px; } .follow-width { position: absolute; border: 1px solid #ccc; padding: 5px; width: expression(document.getElementById("grandfather").style.width); } 

 <div id="grandfather"> <div class="father"> <div class="children">how to get the width of this element?</div> </div> </div> <br> <hr> <br> <div class="follow-width"> this element needs to the width of div.children </div>