具有固定填充/边距的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的边框,情况也一样.我已经看过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兼容性,请参阅bobince的使用答案box-sizing.

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之前的IE中不起作用.如果您不想通过将这些浏览器置于Quirks模式来补偿 - 而您真的不想这样做 - 您可以尝试尝试box-sizing在IE6-7 上实现的修复脚本/行为之一.

如果这还不够,那么你将不得不回到Scott引用的包装器方法.至少这将适用于所有地方.

无论哪种方式,小心浮动百分比,加起来100%和液体布局.如果像素宽度没有很好地除以你使用的百分比,你将得到四舍五入.WebKit通常会向下舍入,这可能会让你的全宽度只有一两个像素; IE6-7将舍入到最近的,而如​​果你运气不好可以让你一两个像素以上,导致您的花车意外包裹.