div容器2周內的div是打破到外層div

Question

我需要你的幫助，

如何可以在下面的CSS代碼進行修改，這樣我就可以有100％的寬度父（容器）DIV而2個內部divs在盒子裏面是70％和30％寬度？就目前來看，第二個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

SOLUTION：

我更新了你的CSS代碼在這個FIDDLE

說明：

的1px的邊框你把身邊內部divs增加與這些div s防止那一個d在CSS寬度屬性中包含邊框，您可以在內部div s上使用box-sizing:border-box;和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; 
} 

Answer 2

邊界增加了你給它的元素的大小。

刪除邊框，它應該像你想要的那樣工作。

而你不需要雙倍寬度。

#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你可以使用保證金左屬性以及解決這一問題......

#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; 
} 

這需要照顧你的邊界的溢出以及股利之外。希望這有助於。我知道你已經接受了一個答案。