Css 为什么100%的宽度穿过帕伦特分区？

更新：不工作。看看

我设置了div的宽度700px，但是如果我添加了一个子div 100%的宽度，那么子div将跨越父div的边界，子div的实际大小是730px。为什么?

---

您必须从

宽度

中删除

填充（
30px
）。您可以使用
calc（）
来执行此操作

.right {
    padding: 15px;
    font-weight: bold;
    font-size: 20px;
    color: #FFF;
    float: left;
    background: none repeat scroll 0% 0% #2C3E50;
    width: calc(100% - 30px);
}

我知道我可以在-30之前安装它，但我的问题是“为什么”@SahriarSaikat-好吧，你正在添加
填充
，所以当然宽度将超过父项的宽度。你必须理解盒子模型。然后使用规则框大小来解决此问题。即使这样也不起作用。是的，它在工作。。。只需添加规则框大小：边框框；去正确的班级。正如我在第一条评论中提到的。我明白了。。边框框属于子分区，而不是父分区。
    body {
       background: #34495e; 
       padding: 50px 0px;
    }

   .container {
       background: #ecf0f1; 
       min-height:480px; 
       width:700px; margin: 0px auto;
    }
    .container h1 {
       text-align: center;
       background: #27ae60; 
       color: #ecf0f1; 
       line-height: 90px; margin: 0px;
     }

     .left  {
       background: #16a085;
       padding:15px; 
       font-weight: bold; 
       font-size: 20px; 
       color: #fff; 
       width:150px; float:left;
     }

     .right  { 
       padding:15px;
       font-weight: bold; 
       font-size: 20px; 
       color: #fff; 
       width:; 
       float:left; 
       background: #2c3e50;
       width:100%;
    }

.right {
    padding: 15px;
    font-weight: bold;
    font-size: 20px;
    color: #FFF;
    float: left;
    background: none repeat scroll 0% 0% #2C3E50;
    width: calc(100% - 30px);
}