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

我想知道是否有人知道如何将像素宽度填充或边距合并到流体柱设计中，而不需要额外的html标记。具有固定填充/边距的CSS液体布局

为了进一步说明，考虑一个简单的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填充，浮动内容将不再以内联方式显示。如果您想将3px边框放到col类中，也是一样。我已经看到了css技术，人们将使用负边距来反转从框模型创建的添加像素，但它仍不会减小宽度。所以基本上，我想要的是一种技术，可以让我保持10％的宽度，但10％的10％是填充（或保证金或不是）。

来源

2010-07-13 Azmisov

没有“额外的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的兼容性，查看使用box-sizing bobince的答案。

来源

2010-07-13 17:13:12 ScottS

我害怕有人会说这是不可能的。我只需要确认，谢谢！ – Azmisov 2010-07-13 18:34:06

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

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

来源

2010-07-13 17:16:57

我认为既然提到了“流体柱设计”，那么固定的容器“宽度”更多用于演示目的。但如果情况并非如此，那么我同意davyM。 – ScottS 2010-07-13 17:21:38

-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-13 17:44:52 bpeterson76

是的，如果你想让你的布局依赖于你的标记，完全忽略了CSS布局的要点，并且基本上还原为表格的方式，那么CSS框架是一个很好的选择。另外作为奖励大多数他们不能做液体布局。哦，什么进展。 – bobince 2010-07-13 17:47:57

YUI特别处理液体没有任何问题。就像简单的例子，你可以使用百分比而不会失败。 – bpeterson76 2010-07-13 17:48:03

我已经看过，谢谢。但我正在为我的公司开发自己的网站IDE。比较而言，那里的许多发电机严重受限。因为他们只专注于一种设计/设计类型。 – Azmisov 2010-07-13 18:32:14

您可以使用box-sizing来改变width的含义，使其包含填充（和边界 - 有点像怪异模式中的盒子模型，没有其他缺点）。

box-sizing是一个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上实现box-sizing的修复脚本/行为。

如果这还不够，您将不得不回退到Scott引用的包装方法。至少这将在任何地方都有效。

无论使用哪种方式，请小心使用百分比加上100％和液体布局的浮动。如果像素宽度不能很好地被你使用的百分比所分割，你会变得圆滑。 WebKit通常会向下滚动，这会使您的全宽度有一个像素或两个害羞; IE6-7将圆整到最近，如果你不走运可能会让你一个或两个像素过度，导致你的浮游物意外地包裹。

来源

2010-07-13 18:01:04 bobince

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

回答

相关问题