填充右的宽度为100％的div

我有一个非常基本的CSS问题，用下面的标记：填充右的宽度为100％的div

#content_container { 
    background: none repeat scroll 0 0 #fff; 
    min-height: 800px; 
    margin: 10px auto 70px; 
    width: 100%; 
    background-color: #ddd; 
    overflow: hidden; 
}

和这个div里面我有几个箱子：

.box { 
    width: 300px; 
    height: 378px; 
    background-color: #F2EBE0; 
    float: left; 
    margin-left: 50px; 
    margin-top: 45px; 
    padding: 15px; 
    padding-top: 0px; 
}

因float，当我调整浏览器窗口的大小时，框会中断。这工作很好。但我知道要做的是保持150px空间在div的右侧。所以我试图将padding-left: 150px添加到#content_container。但是，相反，div的行为像以前一样，它给了我一个x滚动条，并添加了150px。

我的问题是，如何在浏览器的100％宽度内添加填充。为了更好地解释问题，我做了一个Image

谢谢！

来源

2014-04-18 supersize

尝试使用
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

来源

2014-04-18 15:06:02

是的，就是这样。自从我第一次听说这个属性以后，你能解释一下它到底做了什么吗？ – supersize

[here]（http://compass-style.org/examples/compass/css3/box_sizing/）和[here]（http://learnlayout.com/box-sizing.html），你可以找到解释实际的例子;） –

谢谢，非常有用！ – supersize

填充右的宽度为100％的div

回答

相关问题