Question

我需要你的帮助，

如何修改下面的CSS代码，这样我就可以拥有100％宽度的父（容器）div，而2个内部div在框内是70％和30％宽度？现在看来，似乎第二个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;与{{1}一起使用在内部float:left上。

您可以详细了解div属性here

CSS：

box-sizing

Answer 2

Borders增加了你给它的元素的大小。

删除边框，它应该像你想要的那样工作。

你不需要双倍宽度。

#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
background-color:blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
background-color:red;
width: 70%;
}
#innerdiv2 {
height:300px;
background-color:green;
width: 30%;
}

JSFiddle

Answer 3

对于你所提供的代码中你的innderdiv2需要float: left;，但除此之外，看起来你正在经历盒子模型的痛苦。你的div确实是父容器的30％和70％的宽度，但它们每个都有一个1px的边框，这导致它们每个都是2px太大。尝试使用box-sizing: border-box;。我通常做这样的事情：


*,
*:before,
*:after {
    box-sizing: border-box;
}

Answer 4

见这里：

JSFiddle

1px边框将div超过100％，因为它们会增加整体宽度。

在内部div上使用-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;，这样您就可以添加填充和边框等属性，而不会为尺寸做出额外贡献。

Answer 5

你的innserdiv2上的

你也可以使用margin-left属性来解决这个问题......

#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
margin-left:70%;
}

你不需要宽度：#containerdiv的100％。 jsut在#outerdiv中有宽度：100％。

你的＃innerdiv1看起来像

#innerdiv1 {

    height:300px;       
    float:left;
    border: 2px solid red;
    width: 70%;
    box-sizing:border-box;
}

这样可以防止你的边界在div之外溢出。希望这会有所帮助。我知道你已经接受了答案。

拥有2个内部Div的Container Div正在进入外部div

5 个答案: