3

我想知道是否有人知道将像素宽度填充或边距合并到流体列设计中的方法，而无需额外的 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 像素的内边距col，浮动就不再显示为内联。如果您想为col类添加 3px 边框，也是如此。我见过 css 技术，人们会使用负边距来反转从盒子模型创建的添加像素，但它仍然不会减少<div>宽度。所以基本上，我想要的是一种技术，可以让我保持 10% 的宽度，但 10% 的 10px 是填充（或边距或其他）。

4

4 回答 4

7

没有“额外的 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.

于 2010-07-13T17:13:12.443 回答
5

您可以使用它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 上实现的修复脚本/行为之一。

如果这还不够，您将不得不退回到斯科特引用的包装方法。至少这将适用于任何地方。

无论哪种方式，请小心使用加起来为 100% 的百分比和流动布局进行浮动。如果像素宽度不能很好地除以您使用的百分比，您将得到四舍五入。WebKit 通常会向下舍入，这可能会使您的全宽少一到两个像素；IE6-7 将四舍五入到最近，如果你不走运，可能会让你超过一两个像素，导致你的浮动意外换行。

于 2010-07-13T18:01:04.520 回答
1

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

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

于 2010-07-13T17:16:57.217 回答
-1

省去一大堆问题，看看 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。

于 2010-07-13T17:44:52.250 回答