Css 盒子尺寸不小于'；I don’我似乎不尊重我所期望的填充方式

有人能告诉我为什么盒子的尺寸似乎不符合下面给出的div中的填充吗

左列为固定宽度：190px

右栏宽度：100%，左栏边距：190px

绿色div是一个嵌套div，没有宽度和高度：20px

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

div{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}

---

填充物不应该把绿线推进去吗，因为它在左边

框大小：边框框不会删除填充。它只是在计算div的宽度时没有考虑它

div{width:400px；padding:10px；}

将给出一个宽度为420px的div，因为宽度还包括padding

但是

div{width:400px；padding:10px；框大小：border box；}

将给出一个宽度为400px的div，因为它不包含填充

---

但在这两种情况下，填充仍然存在。

本例中的问题在于

#向导主体

div，它有一个左边距，但宽度也为

100%

，这意味着它的容器要宽。浮子也会把事情搞砸。移除这些，它将按预期工作：

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

---

绿色div的行为与预期一致，但在屏幕外跟随容器。

您到底想做什么？第二列的右侧缩进应与左侧缩进相同。我刚刚添加了绿色div来演示这个问题检查这个jsfiddle这是你想要的吗？我还更改了一些css（“wizard-body”比预期的要大得多，所以必须再编辑一些样式）。您肯定是正确的。这很有帮助。

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