css - Box-Sizing 似乎并没有像我期望的那样尊重填充

Question

有人能告诉我为什么在给定以下 fiddle example 的情况下，盒子大小似乎不符合 div 中的填充吗？

// The code is too long for this but can be viewed using browser debugging tools
// and here is a picture that says it all. 

左栏固定宽度:190px；

右列宽度:100%，左边距:190px

绿色的div是没有宽高的嵌套div:20px；

 <style>
  div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
 </style>

padding 不应该将绿线插入左侧吗？

Answer 1

本例中的问题出在 #wizard-body div 上，它有一个左边距，但宽度也为 100%，这意味着它太宽了对于它的容器。 float 也搞砸了。删除这些，它将按预期工作:

#wizard-body {
    float: left;
    width: 100%;
}

绿色 div 的行为符合预期，但在屏幕外跟随容器。