具有固定内边距/边距的 CSS 液体布局
我想知道是否有人知道一种将像素宽度填充或边距合并到流体列设计中的方法，而不需要额外的 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 技术，人们会使用负边距来反转从盒模型创建的添加像素，但它仍然不会减少
I was wondering if anyone knows of a way to incorporate pixel width paddings or margins to a fluid column design, without the need for extra html markup.
To further illustrate, consider a simple html/css layout like this one:
<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>
This displays correctly (disregarding miscellaneous css display bugs that can be taken care of). However, once you add, say, a 10px padding to the col class, the floats no longer display inline. The same goes if you wanted to put a 3px border to the col class. I've seen css techniques where people will use a negative margin to reverse the added pixels created from the box model, but it still won't reduce the <div> width. So basically, what I want is a technique that will allow me to keep a 10% width, but 10px of that 10% be padding (or margin or what not).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
没有“额外的 html 标记”的 CSS3 之前的解决方案。
宽度不包括填充和边框，这只是规范的本质。如果您想避免负边距，那么只需在每个 div 中添加一个额外的包装即可。 css：html：
对于 CSS3 兼容性，请参阅 bobince 使用
box-sizing的答案。There is no pre-CSS3 solution without "extra html markup." The
widthdoes not include padding and borders, that's just the nature of the specification. If you want to avoid negative margins, then simply one extra wrapper in each div works. The css:The html:
For CSS3 compatibility, see bobince's answer that uses
box-sizing.您可以使用
box-sizing来更改width的含义，以便它包含填充（和边框 - 有点像 Quirks 模式中的盒子模型，但没有其他缺点）。box-sizing是一种提议的 CSS3 样式，不幸的是意味着它无法在较旧和晦涩的浏览器上运行，并且在某些浏览器上仍然需要前缀。更重要的是，它在 IE8 之前的 IE 中不起作用。如果您不想通过将这些浏览器置于怪异模式来进行补偿（而且您确实不想这样做），您可以尝试尝试实现
box-sizing在 IE6-7 上。如果这还不够，您将不得不退回到包装器方法，如 Scott 所引用的那样。至少这在任何地方都有效。
无论哪种方式，都要小心浮动百分比加起来为 100% 的浮动布局和液体布局。如果像素宽度不能很好地除以您使用的百分比，则会四舍五入。 WebKit 通常会向下舍入，这可能会让您比全宽少一两个像素； IE6-7 会四舍五入到最接近的值，如果运气不好，可能会多出一两个像素，导致浮动意外换行。
You can do it using
box-sizingto change the meaning ofwidthso that it includes the padding (and border—a bit like the box model in Quirks Mode, without the other drawbacks of that).box-sizingis a proposed CSS3 style, which unfortunately means it won't work on older and obscure browsers, and it still needs prefixing on some browsers.More significantly, it doesn't work in IE prior to IE8. If you don't want to compensate by throwing those browsers into Quirks Mode—and you really don't want to do that—you could try one of the fix scripts/behaviours that tries to implement
box-sizingon IE6-7.If this isn't enough, you'll have to fall back to the wrapper method, as quoted by Scott. At least this will work everywhere.
Either way, be careful floating with percentages that add up to 100% and liquid layout. If the pixel width doesn't divide nicely by the percentages you use, you'll get rounding. WebKit will typically round down, which can leave you a pixel or two shy of your full width; IE6-7 will round-to-nearest, which if you're unlucky can leave you a pixel or two over, causing your floats to unexpectedly wrap.
另一种选择是手动计算宽度/边距/填充。
这是可能的，因为容器具有固定的宽度。
another option is to manually calculate the width/margin/padding.
This is possible since the container has a fixed width.
为自己节省大量问题，请查看 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。
Save yourself a ton of problems and check out 960 grids (960.gs), Blueprint (http://www.blueprintcss.org/) or YUI (http://developer.yahoo.com/yui/grids/) All have this problem worked out so that you simply define a percentage (or number of grids in the case of 960) and the rest of the work is done for you. YUI and 960 even have a generator so you don't have to do the work. As an added bonus, several of these CSS frameworks have a css "reset" that "undoes" the IE flaws and standardizes fonts, spacing, etc that drive us UI guys bonkers.
I recently did a regulatory compliance update of several thousand webpages of varying designs for a major international bank. We standardized on YUI in the beginning and I really grew to enjoy the "grids" portion for its ease of deployment. It's handling sites with 1million+ uniques a day without fail or noticeable delays. Once you get used to how it works, you can have a site laid out in minutes, without ever having to worry about floats, padding, etc. In my personal work I use both Blueprint and 960 for similar reasons.