代码之家 › 专栏 › 技术社区 › Azmisov

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

fluid css html

Azmisov · 技术社区 · 15 年前

我想知道是否有人知道将像素宽度填充或页边距合并到流动列设计中的方法,而不需要额外的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 类,浮动不再显示为内联。如果你想在 科尔 班级。我见过CSS技术,人们会使用负的边缘来反转从盒子模型创建的附加像素,但它仍然不会减少 <div> 宽度。所以基本上,我想要的是一种技术,它允许我保持10%的宽度,但是10%的宽度中的10px是填充的(或者页边空白什么的)。

4 回复 | 直到 11 年前

ScottS 11 年前

没有没有没有“额外的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兼容性,请参阅Bobince使用的答案 box-sizing .

bobince 15 年前

你可以用 box-sizing 改变 width 所以它包括填充(和border_),有点像古怪模式中的盒子模型,没有其他缺点。

箱形尺寸 是一个 proposed CSS3风格,不幸的是,这意味着它不能在旧的和晦涩的浏览器上工作,而且它仍然需要在一些浏览器上预加前缀。

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

更重要的是,在IE8之前,它不能在IE中工作。如果您不想通过将这些浏览器置于怪癖模式来补偿,并且您确实不想这样做,那么您可以尝试其中一种修复脚本/行为来尝试实现 箱形尺寸 关于IE6—7。

如果这还不够,您将不得不返回到由Scott引用的包装方法。至少这在任何地方都适用。

无论哪种方式,都要小心浮动100%的百分比和液体布局。如果像素宽度不能很好地除以您使用的百分比,您将得到舍入。WebKit通常会四舍五入,这会使您的整个宽度减少一到两个像素;IE6-7将四舍五入到最近的一个像素,如果您不走运,可能会使您的像素或两个以上,导致您的浮动意外包装。

Davy Meers 15 年前

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

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

-1

bpeterson76 15 年前

节省大量的问题,查看960个网格(960.gs),蓝图( http://www.blueprintcss.org/ 或YUI http://developer.yahoo.com/yui/grids/ )所有这些都解决了这个问题,因此您只需定义一个百分比(或960情况下的网格数),剩下的工作就为您完成了。Yui和960甚至有一个发电机,所以你不必做这些工作。作为一个额外的好处,这些CSS框架中的一些有一个CSS“重置”,它“消除”了IE的缺陷,并使字体、间距等标准化,这让我们的用户界面非常疯狂。

我最近对一家大型国际银行的数千个不同设计的网页进行了合规性更新。我们在一开始就在Yui上进行了标准化,我真的很喜欢“网格”部分,因为它易于部署。它每天处理超过100万个站点,没有失败或明显的延迟。一旦你习惯了它的工作方式,你就可以在几分钟内安排好一个站点,而不必担心浮动、填充等问题。在我的个人工作中,出于类似的原因,我使用Blueprint和960。