CSS浮动和填充

Question

我有一个非常正常的Wordpress博客，主要部分（静态宽度，左侧浮动）和菜单部分（除了在示例中使用div，也是静态宽度，向左浮动）。

关键是CSS没有“填充”填充为“宽度”，所以我的“主要部分”中的100％宽div看起来不错，但即使是1像素填充也会破坏整个布局。

奇怪的是，当我没有设置宽度时 - 一切正常，对我来说很奇怪，因为我一直认为div总是倾向于占用尽可能多的区域（所以宽度：100％不一样因为没有宽度，即使在第二种情况下div需要... 100％？什么...？：））。

我也有一些内联块元素，更糟糕的是，因为它们永远不适合布局：

http://jsfiddle.net/GCFjh/

我知道浮动和填充是如何工作的，但有没有办法解决我的问题？我的意思是真正的修复，我希望我的divs占用100％的父级主要div，而不需要触摸菜单。而且我不是在寻找作弊（如隐藏的溢出）等，因为在现实世界中我的主要div也有填充：）

Answer 1

它很简单，把它放在另一个中，并将填充应用于内部div，宽度应用于外部：

<div id='outer' style='width:100%;float:left;'>
   <div id='inner' style='padding:10px;'>
   ...
   </div>
</div>

Answer 2

试试这个：

<div style="width: 100%">
    <div class="container">
    Container with paddings
    </div>
</div>

基本上，在div中用div填充div标签，宽度= 100

Answer 3

到目前为止，最简单的方法是使用box-sizing: border-box property。

这适用于所有现代浏览器和IE8 + （不是IE7！）。

如果您关心IE7支持，解决方案就会变得难看。

Live Demo

#main div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}