Question

我的问题是，在Chrome，Mozilla和IE上，宽度/高度（对于div = id =“wrapper”，不同的div）的比例是不一样的（IE看起来像heigt的拒绝属性）。任何帮助，我需要两个固定大小的div，一个在另一个旁边。

<!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>

Answer 1

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

其次，我看到包装器div上没有设置高度

Answer 2

确保您的代码有效：http://validator.w3.org/。修复它找到的小错误将消除浏览器之间的大量差异。

例如，您已为width两次指定#wrapper属性，这没有任何意义。

Answer 3

嘿丽贝卡，欢迎来到SO！：）

首先，我不认为您可以按照您想要的方式获得混合测量单位。你有divs宽度百分比和边框宽度（以像素为单位），基本上你希望1％对于包装器宽度绝不会超过2px。

让我们一步一步来。首先，包装div有2个宽度。第二个将覆盖第一个，你的最终宽度为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;
}

另外，在标记中添加一个带有 clear 类的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的head部分的页面中引用它，如下所示：

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

祝你好运！

分宽问题

3 个答案: