html - 具有 2 个内部 Div 的容器 Div 正在闯入外部 div

Question

我需要你的帮助，

如何修改下面的 CSS 代码，使父(容器)div 的宽度为 100%，而框内的 2 个内部 div 的宽度分别为 70% 和 30%？现在看来，2nd div 似乎是从容器 div 中推出来的？

<style type="text/css">
#containerdiv {
    width:100%;
}
#outerdiv {
    height:300px;
    border: 1px solid blue;
    position: relative;
}
#innerdiv1 {
    height:300px;
    float:left;
    border: 1px solid red;
    width: 70%;
}
#innerdiv2 {
    height:300px;
    border: 1px solid green;
    width: 30%;
}
</style>

<div id="outerdiv">


    <div id="innerdiv1">

    </div>
    <div id="innerdiv2">

    </div>


</div>

Answer 1

解决方案:

我在此 FIDDLE 中更新了您的CSS 代码

解释:

您在内部 div 周围放置的 1px 边框增加了这些 div 的宽度以防止出现这种情况，并将边框包含在 CSS 宽度属性中，您可以使用 box-sizing: border-box; 在两个内部 div 上都带有 float:left。

您可以了解有关 box-sizing 属性的更多信息 here

CSS:

#containerdiv {
    width:100%;
}
#outerdiv {
    height:300px;
    border: 1px solid blue;
    position: relative;
}
#innerdiv1 {
    height:300px;
    float:left;
    border: 1px solid red;
    width: 70%;
    box-sizing:border-box;
}
#innerdiv2 {
    height:300px;
    border: 1px solid green;
    width: 30%;
    box-sizing:border-box;
    float:left;
}