html - 具有固定填充/边距的 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 显示错误)。但是，一旦您向 col 添加了一个 10px 的内边距。类，花车不再内联显示。如果你想给 col 添加一个 3px 的边框也是一样的。类(class)。我见过 css 技术，人们会使用负边距来反转从盒模型创建的添加像素，但它仍然不会减少 <div>。宽度。所以基本上，我想要的是一种技术，可以让我保持 10% 的宽度，但是这 10% 的 10px 是填充(或边距或其他)。

Answer 1

没有“额外的 html 标记”就没有 pre-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 的答案。