2015-06-09 65 views
-2

我的HTML代碼:我怎樣才能獲得父母的父母在CSS與HTML的寬度?

<div id="wrapper" style="width:100%;"> 
    <div style="width:960px;"> 
     <div style="width:30%;"> 
      <div>Hello World!</div> 
     </div> 
    </div> 
</div> 

如何設置寬度的 「Hello World!」 div與「包裝」div與CSS?

+1

如果你不想要它們,爲什麼要設置'width's? – panther

+0

如果你希望世界是包裝寬度,你需要刪除寬度960px和30% –

+0

這取決於你的上下文**很多**。什麼定位,100%真的有多寬等等。 – Nit

回答

0

爲了給它的祖先一個寬度,一種解決方案是給祖先position:relative和元素本身position:absolute

/* make the three divs visible, to demonstrate the effect */ 
 

 
div {background-color: rgba(128,128,128,.3)} 
 

 
/* the main point to the solution */ 
 

 
#wrapper {position:relative} 
 
#wrapper > div > div {position:absolute} 
 

 
/* some cleaning up of the side effects */ 
 

 
#wrapper > div::after {content:'\200B'}
<div id="wrapper" style="width:100%;"> 
 
    <div style="width:960px;"> 
 
     <div style="width:30%;"> 
 
      <div>Hello World!</div> 
 
     </div> 
 
    </div> 
 
</div>

正如你可以看到,當你顯示在整頁的代碼段中,最裏面的div(與最暗背景顏色)是所述最外面的一個的寬度的30%,即使有是一個固定寬度的div。

除非你的意思是別的,在這種情況下,我很抱歉,但你應該更好地解釋自己。

+0

謝謝。它確實有效。它真的幫助了我 –