Question

我想把div放在另一个div中，并且在div中有一个10px的填充，这是div宽度为100％。但要做到这一点，div不在父div之外。

jsFiddle中的示例：

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

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

Answer 1

默认情况下，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

Answer 2

width + padding = Total value因此它会导致滚动条。从float

中删除width和.caixa

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

<强> DEMO

Answer 3

现在删除 float或width 100% .caixa 类，因为 div allready { {1}}现在可以根据需要定义width 100%;

padding

<强> Demo Full screen

<强> Demo in window

我在类 .caixa{ float : left; // remove this line width:100%; // remove this line }

中检查您的代码他们不是必需的 float left或width 100%

div中的宽度div使用100％并具有填充

3 个答案: