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显示错误）。但是，一旦你向col类添加10px填充，浮动内容就不再显示为内联。如果你想将3px边框放到col类，也是如此。我已经看过css技术，人们将使用负边距来反转从盒子模型创建的添加像素，但它仍然不会减少<div>宽度。所以基本上，我想要的是一种技术，可以让我保持10％的宽度，但10％的10％是填充（或边距或不是）。

Answer 1

没有“额外的HTML标记”，没有预先的CSS3解决方案。 width不包括填充和边框，这只是规范的性质。如果你想避免负边距，那么每个div中只需要一个额外的包装器。 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兼容性，请参阅使用box-sizing的bobince答案。

Answer 2

您可以使用box-sizing更改width的含义，使其包含填充（和边框 - 有点像Quirks模式中的框模型，没有其他缺点）

box-sizing是一种proposed CSS3风格，遗憾的是它不适用于较旧且模糊的浏览器，并且仍需要在某些浏览器上添加前缀。

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

更重要的是，它在IE8之前的IE中不起作用。如果您不想通过将这些浏览器置于Quirks模式来补偿 - 而您真的不想这样做 - 您可以尝试尝试在IE6-7上实现box-sizing的修复脚本/行为之一

如果这还不够，你将不得不回到Scott引用的包装方法。至少这将适用于所有地方。

无论哪种方式，请小心浮动百分比，加上100％和液体布局。如果像素宽度没有很好地除以你使用的百分比，你将得到四舍五入。 WebKit通常会向下舍入，这可能会让你的全宽度只有一两个像素; IE6-7会四舍五入到最近，如果你运气不好可能会给你留下一两个像素，导致你的花车出乎意料地换行。

Answer 3

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

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

Answer 4

为自己节省大量问题并查看960个网格（960.gs），蓝图（http://www.blueprintcss.org/）或YUI（http://developer.yahoo.com/yui/grids/）所有问题都已解决，因此您只需定义一个百分比（或960的情况下的网格数量），其余的工作都是为您完成的。 YUI和960甚至还有一台发电机，所以你不必做这项工作。作为一个额外的好处，这些CSS框架中的一些有一个css“重置”，“解除”IE漏洞，并标准化字体，间距等，这些都会驱使我们UI用户疯狂。

我最近对一家大型国际银行的数千个不同设计的网页进行了监管合规更新。我们在开始时对YUI进行了标准化，并且由于其易于部署，我真的开始享受“网格”部分。它每天处理100万+唯一的网站，没有失败或明显的延迟。一旦你习惯了它的工作方式，你可以在几分钟内完成一个网站，而不必担心浮动，填充等。在我的个人工作中，我出于类似的原因同时使用Blueprint和960。

具有固定填充/边距的CSS液体布局

4 个答案: