Question

我需要你的帮助，

div似乎是正确嵌套（左，上和右）边框排列，但在底部看起来它们比容器div的长。

请参见此处的图片： enter image description here

以下是HTML编码：

<!DOCTYPE html>
<html>
<head>
    <title>Centered Div</title>
    <style>
    body { background: #000; }
    #wrapper {
        height: 100px;
        width: 500px;
    }

    #wrapper {
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

#container {
    background: rgb(230,230,230);
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 1px solid red;
    height: 100%;
    position: relative;
}
#inner1 {
    height: 100%;
    border: 1px solid blue;
}
#inner2 {
    height: 100%;
    border: 1px solid green;
}

    </style>
</head>
<body>


    <div id="wrapper">
        <div id="container">

            <div id="inner1">

                <div id="inner2"></div>

            </div>

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

Answer 1

div正在被他们的边界以及父div的边界向下推。由于未指定宽度，div将正确填充水平空间。但由于div的高度设置为100％，因此它们被边界向上推下1px。由于边界位于div的外侧，因此不会将其视为高度或宽度的一部分，因此不会将其视为height:100%的一部分。

如果将CSS中的宽度更改为border: 10px solid red/green/blue;，则可以更清楚地看到这一点。

要更正此问题，请设置box-sizing和#inner1 div的#inner2 CSS属性，如下所示：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

将一堆div整齐地嵌入彼此的边界

1 个答案: