Divs寬度問題

我的問題是寬度/高度的比率（對於div與id =「wrapper」，不同的是巨大的）在Chrome，Mozilla和IE上不一樣（IE看起來像heigt的拒絕屬性）。任何幫助，我需要兩個固定大小的div，一個旁邊。Divs寬度問題

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title></title> 

     <style type="text/css"> 

      div#wrapper { 
       width: 1000px; 
       width:700px; 
       margin-left:auto; 
       margin-right:auto; 
       overflow: hidden; 
      } 
      div#left { 
       width: 80%; 
       height: 80%; 
       min-height: 80%; 
       float: left; 
       background-color: #DFDFDF; 
       border-left-width:2px; 
       border-left-style:solid; 
       border-left-color:#606060; 
       border-bottom-width:2px; 
       border-bottom-style:solid; 
       border-bottom-color:#606060; 
       border-top-width:2px; 
       border-top-style:solid; 
       border-top-color:#606060; 
      } 
      div#right_up { 
       width: 19%; 
       height: 80%; 
       min-height: 80%; 
       float: left; 
       background-color: whitesmoke; 
       border-top-width:2px; 
       border-top-style:dashed; 
       border-top-color:#FF2A2A; 
       border-right-width:2px; 
       border-right-style:dashed; 
       border-right-color:#FF2A2A; 
       border-left-width:2px; 
       border-left-style:solid; 
       border-left-color:whitesmoke; 
      } 


     </style> 
    </head> 
    <body id="body""> 
     <div id="wrapper"> 
      <div id="left"> 
         REFERENCE: 

      </div> 
      <div id="right_up"> 

      </div> 

     </div> 
    </body> 
</html>

來源

2010-10-24 Rebecca

首先，您不能在浮動元素上使用百分比高度。

其次，我看不出有任何高度上的包裝DIV

來源

2010-10-24 22:13:31

請確保您的代碼驗證設置：http://validator.w3.org/。修復它發現的小錯誤將消除瀏覽器之間的很大差異。

例如，您爲#wrapper指定了width屬性兩次，這沒有任何意義。

來源

2010-10-24 22:15:01

嘿Rebecca，歡迎來到SO！ :)

首先，我不認爲你會得到混合的測量單位按照你想要的方式行事。你有百分比div寬度和邊界寬度像素，基本上你希望1％永遠不會超過2px的包裝寬度。

讓我們一步一步來。首先，你有2個寬度的包裝div。第二個將覆蓋第一個，最終寬度爲700px。這很少，你應該重新考慮寬度960px或最大。 990px（其中保證的今天你會不會對屏幕分辨率的99.9％的水平滾動條

讓我們重寫到：

div#wrapper { 
    width: 700px; /* 700 to stick to your design */ 
    margin: 0 auto; /* which is basically the same as you have, but in one property, not two */ 
    overflow: hidden; 
} 

div#left { 
    width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */ 
    height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */ 
    min-height: 80%; 
    float: left; 
    background-color: #DFDFDF; 
    border: 2px solid #606060; /*set a border all over the div */ 
    border-right: 0; /* and remove the right border */ 
} 

div#right_up { 
    width: 140px; /* 20% of 700px */ 
    height: 80%; /* same height problem as you have for the other div here */ 
    min-height: 80%; 
    float: right; /* float right, not left like the other one */ 
    background-color: whitesmoke; /* please set colors in hex, not like this */ 
    border: 2px dashed #FF2A2A; 
    border-left: 2px solid whitesmoke; /* again, colors in hex please */ 
    border-bottom: 0; 
}

此外，在添加一個div類明確類似這樣的標記：

<div id="wrapper"> 
    <div id="left"> 
     REFERENCE: 
    </div> 
    <div id="right_up"> 

    </div> 
    <div class="clear"></div> 
</div>

並在CSS這樣添加一個類定義：

.clear { 
    clear: both; 
}

最後的建議是，把永諾你的CSS在外部樣式表和在HTML中像這樣的頭部部分引用它在你的頁面：

<link rel="stylesheet" type="text/css" href="path/to/style.css">

祝你好運！

來源

2010-10-24 22:27:45 Claudiu

回答

相關問題