CSS 浮动和填充

Question

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

关键是 CSS 不会将填充“算作”宽度”，因此我的“主要部分”中 100% 宽的 div 看起来没问题，但即使是 1 像素填充也会破坏整个布局。

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

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

http://jsfiddle.net/ GCFjh/

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

Answer 1

很简单，将其放在另一个 div 中，然后将 padding 应用于内部 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 标签用 padding 包裹在 div 内，宽度=100

Answer 3

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

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

如果您关心 IE7 支持，那么解决方案就会变得丑陋。

现场演示

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