2012-06-06 66 views
1

HTML代碼絕對位置的概率

<body> 
     <div id="container"> 

       <div id="left"> 
          <h2>rerererere</h2> 
       </div> 
       <div id="right"> 
          <h2>sdadsad</h2> 
       </div> 
     </div> 
</body> 

CSS文件

div#container { 
position: relative; 
    border: 1px solid #000; 
} 

#left { 
    position: absolute; 
    width: 480px; 
    height: 480px; 
    border: 1px solid #0092ef; 
      /*  blue*/ 
} 

#right { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    bottom: 10px; 
    width: 250px; 
    border: 1px solid #783201; 
      /*  brown*/ 
} 

當我只有使用權DIV絕對不是沒有問題。但是,當我在左右分區中使用絕對值時。正確的div變得和線一樣小。我對css很陌生。所以這可能是一個noob問題。爲什麼如果我把兩個絕對div下的相對div不起作用?請幫助我。

回答

4

您的權利<div>崩潰,因爲你還沒有宣佈在CSS它一個固定的高度,這就是全部。

+0

當我使用height = 480px它打破了容器的邊界。我在容器中使用相對佈局,在左側和右側使用絕對佈局,因爲我知道右側和左側div將保留在容器內。有什麼事嗎? –

+0

@Diptopol Dam ...好吧,它看起來像是正確的盒子超出容器,因爲你有「頂」和「右」設置。只需考慮所有相關元素的維度並根據需要進行調整。你也可以實現你使用浮動而不是絕對定位後的結果,這也消除了崩潰問題。 – Tom

1

你的右div有沒有指定的高度這就是爲什麼它縮短到行高度。

再加上正確的div刪除bottom: 10px;的,因爲已經指定了頂值,這是多餘的。