0

我想把一个 div 放在另一个里面，并且在那个 div 中有一个 10px 的填充，这是 div 宽度到 100%。但要做到这一点，div 会超出父 div。

jsFiddle 中的示例：

http://jsfiddle.net/kCypn/5/

.caixa
{   
    float : left;
    width:100%;    
    background-color:white;
    padding:25px;
}

我遇到的另一个问题是，我有一个 div 左对齐，宽度为 150px，另一个 div 占据所有剩余空间和填充。

4

3 回答 3

2

默认情况下，CSS 盒子模型将元素的最终宽度计算为其和width之border和padding。box-sizing您可以通过使用属性来克服这种令人困惑的行为：

.caixa
{   
    float : left;
    width:100%;    
    background-color:white;
    padding:25px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/kCypn/7/

阅读：http
://css-tricks.com/box-sizing/ 浏览器支持：http ://caniuse.com/#feat=css3-boxsizing

于 2013-03-21T11:25:59.373 回答
0

width + padding = Total value所以它导致滚动条。删除float和width从.caixa

.caixa
{     
    background-color:white;
    padding:25px;
}

演示

于 2013-03-21T11:26:06.810 回答
0

现在删除 float或width 100%在您的.caixa 班级中，因为div 已经准备就绪width 100%;，现在可以padding根据需要定义

.caixa{   
    float : left; // remove this line
    width:100%; // remove this line

}

演示全屏

窗口中的演示

我检查您的代码，它们不是必需 float left的或width 100%在您的班级中 .caixa

于 2013-03-21T11:28:59.007 回答