CSS液态布局与固定填充/边距

Question

我想知道有没有一种方法可以在流式列设计中添加像素宽度的填充或边距，而无需额外的HTML标记。

为了进一步说明，考虑一个简单的HTML/CSS布局，如下所示：

<style>
    .cont{width:500px;height:200px;border:1px solid black;}
    .col{float:left;}
    #foo{background-color:blue;width:10%;}
    #bar{background-color:yellow;width:30%;}
    #baz{background-color:red;width:60%;}
</style>
<div class="cont">
    <div class="col" id="foo">Foo</div>
    <div class="col" id="bar">Bar</div>
    <div class="col" id="baz">Baz</div>
</div>

这个显示是正确的（忽略了可以解决的杂项css显示错误）。然而，一旦你添加比如说10像素的padding到col类中，浮动就不再显示为内联元素。如果你想给col类添加3像素的边框，情况也是一样的。我见过人们使用负边距的css技巧来抵消盒模型所创建的额外像素，但它仍然无法减少<div>的宽度。因此，基本上我想要的是一种技术，允许我保持10%的宽度，但其中10像素是填充（或外边距或其他什么东西）。

- Azmisov

Answer 1

没有不需要“额外html标记”的CSS3之前的解决方案。规范本身不包括padding和边框在内，这就是规范的本质。如果您想避免使用负边距，则每个div中简单地添加一个额外的wrapper即可。CSS代码如下：

.padder {border: 3px solid green; padding: 10px;}

HTML：

<div class="cont">
    <div class="col" id="foo"><div class="padder">Foo</div></div>
    <div class="col" id="bar"><div class="padder">Bar</div></div>
    <div class="col" id="baz"><div class="padder">Baz</div></div>
</div>

为了实现CSS3的兼容性，请参考Bobince的答案，使用box-sizing。

- ScottS

---

我担心有人会说这是不可能的。我只是需要确认一下，谢谢！ - Azmisov

Answer 2

你可以使用box-sizing来改变width的含义，使其包括填充（和边框——有点像Quirks模式下的盒模型，但没有那么多缺点）。

box-sizing是一个建议的CSS3样式，不幸的是，这意味着它在旧版和鲜为人知的浏览器上无法工作，并且在某些浏览器上仍需要前缀。

.col{
    float:left; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

更重要的是，它不适用于IE8之前的版本。如果您不想通过将这些浏览器放入怪异模式来进行补偿——您确实不想这样做——您可以尝试其中一个修复脚本/行为，该脚本/行为尝试在IE6-7上实现box-sizing。

如果这还不够，您将不得不回到Scott引用的包装器方法。至少这将在任何地方都起作用。

无论哪种方式，都要小心使用占总百分比的浮动和液体布局。如果像素宽度不能被您使用的百分比整除，则会出现舍入误差。WebKit通常会向下舍入，这可能会使您的宽度略少于一个或两个像素；IE6-7将四舍五入，如果运气不好，可能会使您多一个或两个像素，导致您的浮动意外换行。

- bobince

Answer 3

另一个选项是手动计算宽度/边距/填充。

这是可能的，因为容器有固定的宽度。

- Davy Meers

---

我认为既然提到了“流体列设计”，那么固定容器的width更多是为了演示目的。但如果不是这种情况，那么我同意davyM的观点。 - ScottS

Answer 4

为了避免很多问题，建议你查看960 grids (960.gs)、Blueprint (http://www.blueprintcss.org/) 或者 YUI (http://developer.yahoo.com/yui/grids/)。它们都解决了这个问题，你只需要定义一个百分比（或者在960的情况下定义网格数量），剩下的工作就交给它们了。YUI 和 960 还有生成器，让你无需动手操作。此外，几个 CSS 框架还带有 CSS “重置”功能，可以“取消”IE的缺陷并标准化字体、间距等，这将让我们的 UI 工作更加轻松。

我最近为一家国际大银行更新了数千个设计不同的网页，以符合监管合规要求。我们在一开始就统一采用YUI框架，我非常喜欢其中的“grids”部分，因为它易于部署，即使每天有超过100万独立访客也能无故障、无明显延迟地运行。一旦你习惯了它的工作方式，你可以在几分钟内完成站点布局，而不必担心浮动、填充等问题。在我的个人工作中，我也会因为类似的原因使用Blueprint和960。

- bpeterson76

---

是的，如果您想使布局依赖于标记，完全错过CSS布局的要点，并基本上回到表格的做事方式，那么CSS框架是一个不错的选择。另外，作为一种奖励，它们中的大多数都不能进行流动布局。哦，进步啊。 - bobince

YUI 特别处理 Liquid 没有任何问题。就像简单的例子一样，您可以毫不失败地使用百分比。 - bpeterson76

我已经研究过了，谢谢。但是我正在为我的公司开发自己的网站IDE。与其他生成器相比，很多都受到严重限制。它们只专注于一种设计或设计类型，因此功能有限。 - Azmisov