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

Divs宽度问题

回答

相关问题