爲什麼在給定寬度= 100％的情況下，div和表的行爲有所不同？

這裏是我的代碼，減少到相關部分：爲什麼在給定寬度= 100％的情況下，div和表的行爲有所不同？

<html><head><title></title> 
<style type="text/css"> 
body { background-color: #fff; } 
#titlebar{ border: solid 1px black; margin:10px; } 

#bodyWrapper{ float: left; width: 100%; } 

#bodyColumn{ margin-left: 230px; height:500px; } 

#menuColumn{ 
    float: left; 
    width: 230px; 
    border: solid 1px black; 
    margin-left: -100%; 
    height:500px; 
} 

.bigContent{ width: 100%; margin:10px; } 

.section{ 
    border: 1px solid black; 
    padding:10px; 
    overflow: auto; 
} 
</style></head><body> 

<div id="titlebar">Title</div> 
<div id="bodyWrapper"><div id="bodyColumn"> 

<table class="section bigContent"><tr><td>FIRST</td></table></table> 
<div class="section bigContent">SECOND</div> 

</div></div> 
<div id="menuColumn">MENU</div> 
</body></html>

我的問題：

的<div>含有「第二」是不是包含「FIRST」的<table>更寬雖然兩者都是兄弟姐妹和有width=100%通過相同的CSS類
<div>也比屏幕更寬，導致滾動條出現

這是爲什麼，我能做些什麼來解決它？

注：我看到在這兩個火狐3.6和IE 8

來源

2011-01-25 Michael Borgwardt

這同樣的問題是，因爲padding的。在CSS中，width屬性應用於元素的內容框，沒有填充。

參見http://www.w3.org/TR/CSS21/box.html：該width屬性應用於Content塊在下面的模式：

所以外元素的寬度是父的寬度的100％，加上左填充的10px的和的10px的正確的填充。

鑑於此元素是塊元素，因此不需要將其寬度指定爲100％。

因此，解決方案是：

要不要設置寬度
要設置寬度（在這裏，這需要設置填充在%，如填充的2％時，採取填充進去和96％（100-2 * 2）的寬度

來源

2011-01-25 18:11:10 arnaud576875

這並不能解釋爲什麼``

沒有這樣的表現。 – Alohci2011-01-25 21:13:41

相關問題

爲什麼在給定寬度= 100％的情況下，div和表的行爲有所不同？

回答

相關問題