更新与总结
既然附加了赏金，我觉得有义务让这个问题更清楚。
（另外，我很确定当calc()CSS3 单位值得到支持时，这将是小菜一碟，做类似的事情width: calc(25% - 5px)；虽然到那时我们可能会在脑海中浏览互联网）
我正在为一些共享设计要求的项目开发 CSS 框架；即流体12列布局。.column使用百分比宽度为 的浮动元素(100% / 12) x col_size，这相当容易。但是，问题在于在列之间添加了固定边距（或任何形式的间距）。
我最初的尝试使用了所描述的流体列，.panel每个列都嵌套了一个子项。HTML/CSS 片段如下（为简洁起见）：
.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>
此代码段将产生类似于下图的布局，但是所有.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-child10 像素（或任何边距大小）。
这可能看起来无害，甚至不引人注意；然而，在某些情况下，元素之间的精确（尽可能精确）宽度分布要么是必要的，要么会使事情变得更容易。
因此，无论是使用填充、边距还是它们的某种组合；有没有针对流体列、固定边距、均匀分布的排水沟空间的解决方案，不会从相邻列中抢走“边际”（***哈哈*）内容区域？**
原始问题
由于在我的搜索和尝试中简单地缺乏结果，我得出结论这是不可能的。如果任何地方都可以产生答案，我敢肯定它就在这里。
有没有办法使用纯 CSS 来实现具有固定宽度边距的流体宽度列布局？
重要说明：此图只是一个示例，而不是我希望实现的特定布局。给定的解决方案应允许相邻列的任意组合，总宽度分布总计为 12 或更少。考虑流行的960 网格以供参考。）
注意：在 12 列布局中，图像中列的宽度分布分别为 2、3、2 和 5。
到目前为止，我使用了一个使用百分比的网格，几乎可以做到这一点。问题是，为了实现边距，每一列都需要一个额外的孩子（我称之为他们.panel）：
width: 100%;
box-sizing: border-box;
padding: 10px;
这又差不多，很好；这种方法的问题是第一列和最后一列具有外部“边距”（10px），并且每列之间的“边距”加倍（2 x 10px）
当然，通过包含新的 CSS3calc()值类型，可以更轻松地解决这个问题。方向：
.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）伪选择器。
