【发布时间】：2011-11-03 16:22:05
【问题描述】：
更新与总结
既然附加了赏金，我觉得有义务让这个问题更清楚。
(另外，我敢肯定，当支持calc() CSS3 单位值时，这将是小菜一碟，比如width: calc(25% - 5px)；尽管我们可能会在脑海中浏览互联网那一点)
我正在为一些共享设计要求的项目开发 CSS 框架；即流体12列布局。使用百分比宽度为(100% / 12) x col_size 的浮动.column 元素，这相当容易。但是，问题在于在列之间添加了固定边距（或任何形式的间距）。
我最初的尝试使用了所描述的流体列，每个都嵌套了一个.panel 子级。 HTML/CSS sn-p 如下（为简洁起见）：
.column{
float: left;
display: inline-block;
}
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
.panel{
width: 100%;
padding: 5px;
box-sizing: border-box; /* so padding doesn't increase width */
}
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-03">
<div class="panel">Width-03</div>
</div>
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-05">
<div class="panel">Width-05</div>
</div>
这个 sn-p 将产生类似于下图的布局，但是所有 .panel 元素的所有边都有 5px 填充。 我正在尝试使外部列的内容边缘与视口（或相关的父容器）边缘齐平。另一种方法是完全消除 .panel 类，只使用列：
.column{
float: left;
display: inline-block;
padding-left: 10px;
box-sizing: border-box;
}
.column:first-child{ padding-left: 0px; }
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>
再一次，这很好用，产生的结果更接近下图，但是现在（实际）问题是填充正在占用拧紧的列的宽度上宽度分布。 :first-child 列的内容区域宽度比其兄弟列大 10 像素（或任何边距大小）。
这可能看起来无害，甚至不引人注意；但是在某些情况下，元素之间的宽度分布精确（尽可能精确）要么是必要的，要么会使事情变得更容易。
因此，无论是使用填充、边距还是它们的某种组合；对于流体列、固定边距、均匀分布的装订线空间，是否有任何解决方案不会从相邻列中抢走“边际”（***哈哈*）内容区域？ **
原始问题
由于我的搜索和尝试都没有结果，我认为这是不可能的。不过，如果任何地方都能给出答案，我敢肯定它就在这里。
有没有什么方法可以使用纯 CSS 来实现具有固定宽度边距的流体宽度列式布局？
重要提示：此图只是一个示例，并不是我想要实现的特定布局。给定的解决方案应允许相邻列的任意组合，总宽度分布总计为 12 或更少。考虑流行的960 grid 以供参考。）
注意：在12列布局中，图片中各列的宽度分布分别为2、3、2、5 .
到目前为止，我使用了一个网格，使用百分比，几乎可以实现这一点。问题是，为了实现边距，每一列都需要一个额外的子项（我称它们为.panel）：
width: 100%;
box-sizing: border-box;
padding: 10px;
这也是，几乎，很好；这种方法的问题是第一列和最后一列具有外部“边距”（10px），并且每列之间的“边距”加倍（2 x 10px >)
当然，通过包含新的 CSS3 calc() 值类型，可以更轻松地解决这个问题。方向：
.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
width: calc(75% - 10px);
margin: ...;
}
我已经修复了一些 Javascript，我已经破解了一些“有效”的东西，但我正在寻求。希望最神圣的圣杯存在。
不幸的是，以下解决方案以及 @avall 提供的解决方案（虽然在简化方面肯定是一个不错的选择）并不是我想要的。主要问题是，边距在列之间分布不均匀。
我可以看到这个工作的唯一方法是将 .panel 填充减少到 5px 和类似的东西：
.column:first-child > .panel {
padding-left: 0px;
}
.column:last-child > .panel {
padding-right: 0px;
}
/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
padding-right: 0px;
padding-left: 0px;
}
这种解决方案是不可接受的，只是因为 IE8 无法识别 :last-child（以及就此而言 :only-child）伪选择器。
【问题讨论】：
-
为什么要在纯 css 中使用它？是否有任何理由无法使用表格（或显示：表格）进行布局？
-
@Exelian - 我是 tables != layout 学派的坚定支持者。至于
display: table，浏览器支持的不一致（虽然不可怕）让我寻找替代方案。同样，关于display: table，我遇到了一些关于“单元格”不遵守大小调整属性的问题。否则是的，表格显示属性将是一个很可能的解决方案。 -
为什么不将 last-child 或 only-child 类添加到相应的列，然后针对类而不是伪选择器应用零填充，以便让 @avall 的解决方案在 IE8 上工作和下面？我知道这是额外的标记，但无论如何我们现在不得不经常这样做。
-
解决这个问题要简单得多：codepen.io/roydukkey/pen/eudsn
-
@roydukkey，codepen 参考非常棒，而且比公认的答案简单得多 - 谢谢！
标签： html css fluid-layout