問題與divs彼此堆疊

Question

我有一些問題與對齊旁邊的3個div。

http://jsfiddle.net/Lpprn/

我有一種強烈的感覺，它在語法，但我不能爲我的生命數字出來。

#story-container { 
    width: 700px; 
    padding: 0px; 
    margin: 0 auto; 
} 
#story-left { 
    width: 300px; 
    padding: 10px; 
    padding-right: 0px; 
    float: left; 
    text-align: right; 
    margin: 0; 
    background-color: #000000; 
} 
#story-center { 
    width: 100px; 
    float: left; 
    margin: 0; 
    background-color: #ffffff;  
} 
#story-right { 
    width: 300px; 
    padding: 10px; 
    padding-left: 0px; 
    float: left; 
    text-align: left; 
    margin: 0; 
    background-color: #808080; 

} 

感謝您的幫助！

Answer 1

包含的元素不會合計到父項的寬度700px。

這是因爲將填充添加到子元素的寬度。

因此，300px + 10px + 100px + 10px + 300px！= 700px

你要麼必須從寬度減去填充值，或使用類似box-sizing，改變元素的盒模型，從而導致其padding/border屬性被計算到其width/height中。

box-sizing CSS屬性用於更改用於計算元素寬度和高度的默認CSS框模型。可以使用此屬性來模擬不正確支持CSS框模型規範的瀏覽器的行爲。

邊框：寬度和高度屬性包括填充和邊框，但不包括邊距。

從MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

添加以下每個元素，但它實際上就不再需要中間元素，#story-center上，因爲它目前沒有任何填充。

jsFiddle example - 它的工作原理現在 _{- （紅色背景加到顯示父容器）}

box-sizing: border-box; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;