響應式設計中的嵌套式DIV - 邊距，填充等

這已經有一段時間了，因爲我真的處理了網頁設計中的百分比。我有一個嵌套的DIV，它位於一個容器內，但容器的填充將它推到100％的寬度以外。不希望開始嘗試和錯誤的過程，看看它是如何使其儘可能接近100％的寬度，我如何才能實現舒適貼合？我還注意到，當我調整窗口的大小並使空間變小時，右手邊的墊子變得更小了。響應式設計中的嵌套式DIV - 邊距，填充等

<div id="block"> 
    <div class="inside">ssdfsdfdfsfdf</div> 
</div> 

#block { 
    width: 100%; 
    background-color: #CCC; 
    padding: 20px; 
} 
.inside { 
    height: 200px; 
    background-color: #333; 
}

http://jsfiddle.net/AndyMP/cs2U9/4/

來源

2012-09-06 Andy

你可以做填充也是一個百分比值，然後填充+寬= 100％ –

爲什麼不把的jsfiddle代碼和您發佈匹配的代碼？這使用填充，而你的例子使用邊緣..？帶邊緣的版本對我來說看起來很緊張。你可能想給'.inner'一個溢出值，但除此之外，沒有看到問題。 – Dutchie432

對不起，我發佈了錯誤的小提琴。它是固定的... http://jsfiddle.net/AndyMP/cs2U9/4/ – Andy

使用box-sizing CSS屬性＃阻止元素。

#block { 
    width: 100%; 
    background-color: #CCC; 
    padding: 20px; 

    -o-box-sizing: border-box; /* Opera */ 
    -ms-box-sizing: border-box; /* IE */ 
    -moz-box-sizing: border-box; /* Mozilla */ 
    -webkit-box-sizing: border-box; /* Chrome, Safari */ 
    box-sizing: border-box; 
}

關於CSS盒子施膠性：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

來源

2012-09-06 14:56:10 alexbusu

或者只是使用保證金，而不是填充.. – Johan

@Alexandru B.這很好。 – Andy

但是，如果不使用未經過CSS3驗證的CSS，就無法實現這一點。 – Andy