更新与总结

我觉得有义务让这个问题更清楚，现在有悬赏。

(另外，我很确定当 calc() CSS3 单位值被支持时，这将是 child 的游戏，做类似 width: calc(25% - 5px) 的事情；尽管到那时我们可能会在我们的脑海中浏览互联网)

我正在为一些共享设计要求的元素开发 CSS 框架；即流畅的 12 列布局。使用 float .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>

.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>

width: 100%;
box-sizing: border-box;
padding: 10px;

.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
    width: calc(75% - 10px);
    margin: ...;
}

.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;
}

最佳答案

我终于想通了。在过去十年中断断续续地浪费了数百个小时之后(尽管我依赖于一些一年前无论如何都行不通的 css)。我在没有任何问题的情况下解决了它。并在 IE8+ 中。

请准备 2001: A Space Odyssey 音乐，因为我要登上这艘船。

这种方法的天才和技巧是使用内联块元素，然后使用字间距来平衡使用负右边距。负的右边距本身会将元素拉到一起，允许您设置 100% 的宽度并仍然适合它们之间的内容，但让元素重叠。在父级上设置负边距只会撤销子级边距对与总宽度交互的影响(我们试图达到的神奇“100% 宽度”标记)。填充仅用于增加其元素的大小在反作用余量方面并且是无用的。它通常在陪审团操纵解决这个问题的解决方案中与 box-sizing 一起使用，代价是完全失去使用填充的能力(和余量)并且可能需要更多包装元素。

word-spacing 提供了神奇的“第三种方式”来添加或删除两个元素之间的水平距离，前提是它们是内联块，因为在这种情况下它们将被视为单个“单词”，并且它们之间的任何空格都将折叠为单一可控的“字间距”属性。除了这个技巧，我不知道另一种方法来获得这个 100% 结果。

我谦虚地提出了固定排水沟 flex-columns 问题的最终答案。我在此将我的解决方案命名为“欧米茄机动”。它具有处理任意混合宽度列的能力(添加最多 100% 的总宽度以进行四舍五入)、任何装订线大小、任何预定义的宽度列数、使用自动换行处理任意数量的行，以及使用 inline-block 元素，因此提供了 inline-block 附带的垂直对齐选项，并且它不需要任何额外的标记，只需要容器上的单个类声明(不包括定义列宽)。我认为代码不言自明。这是 2-6 列的代码实现，使用 10px 装订线和百分比的奖金助手类。

编辑:有趣的难题。我设法得到了两个略有不同的版本；一个用于 mozilla 和 ie8+，另一个用于 webkit。似乎单词间距技巧在 webkit 中不起作用，我不知道为什么其他版本在 webkit 中有效，但在 ie8+/mozilla 中无效。将两者结合起来可以让您涵盖所有内容，我愿意打赌有一种方法可以统一这种策略或非常相似的方法来解决这个问题。

EDIT2:大部分都明白了!神奇text-align: justify使用字间距使 WebKit 几乎就在那里。间距似乎有点偏离，就像右边的像素问题，也许是排水沟中的一个额外像素。但它是可用的，而且与我以前使用过的任何东西相比，保留列似乎更可靠。它永远不会减少到更少的列，它会压缩直到浏览器获得水平滚动条。

Edit3:让它有点接近完美。将 font-size 设置为 0 可以使大多数剩余的间距问题正常化。现在只需要修复 IE9，如果它的字体大小为 0，它就会折叠它。

EDIT4:从其他一些流体宽度的帖子中得到了 IE 的答案:-ms-text-justify: distribute-all-lines .在 IE8-10 中测试。

/* The Omega Maneuver */
[class*=cols] { text-align: justify; padding-left: 10px; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class*=cols]>* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }

.cols2 { word-spacing: 20px; padding-right: 20px; }
.cols3 { word-spacing: 30px; padding-right: 30px; }
.cols4 { word-spacing: 40px; padding-right: 40px; }
.cols5 { word-spacing: 50px; padding-right: 50px; }
.cols6 { word-spacing: 60px; padding-right: 60px; }

  .cols2 > * { margin-right: -10px; }
  .cols3 > * { margin-right: -20px; }
  .cols4 > * { margin-right: -30px; }
  .cols5 > * { margin-right: -40px; }
  .cols6 > * { margin-right: -50px; }

.⅛, .⅛s >* { width: 12.50%; }
.⅙, .⅙s >* { width: 16.66%; }
.⅕, .⅕s >* { width: 20.00%; }
.¼, .¼s >* { width: 25.00%; }
.⅓, .⅓s >* { width: 33.00%; }
.⅜, .⅜s >* { width: 37.50%; }
.⅖, .⅖s >* { width: 40.00%; }
.½, .½s >* { width: 50.00%; }
.⅗, .⅗s >* { width: 60.00%; }
.⅝, .⅝s >* { width: 62.50%; }
.⅔, .⅔s >* { width: 66.00%; }
.¾, .¾s >* { width: 75.00%; }
.⅘, .⅘s >* { width: 80.00%; }
.⅚, .⅚s >* { width: 83.33%; }
.⅞, .⅞s >* { width: 87.50%; }
.blarg-five-twelfs { width: 41.66%; }

<div class="cols4">
    <div class="⅙">This is my magnum opus</div>
    <div class="¼">I finally beat css</div>
    <div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>

.fourEqualCols { word-spacing: 40px; padding: 0 40px 0 10px;
                 text-align: justify; font-size: 0;
                 -ms-text-justify: distribute-all-lines; }

.fourEqualCols>* { margin-right: -30px; width: 25%;
                   display: inline-block; word-spacing: normal;
                   text-align: left; font-size: 13px; }


<div class="fourEqualCols ">
  <div>GLORIOUSLY CLEAN MARKUP</div>
  <div>I hate extra markup and excessive class props</div>
  <div>Naked code</div>
  <div>get intimate</div>
</div>

[class^=cols] { text-align: justify; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class^=cols] >* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }

.cols2 { word-spacing: 20px; padding-right: 10px; }
.cols3 { word-spacing: 30px; padding-right: 20px; }
.cols4 { word-spacing: 40px; padding-right: 30px; }
.cols5 { word-spacing: 50px; padding-right: 40px; }
.cols6 { word-spacing: 60px; padding-right: 50px; }
 .cols2 >* { margin-right: 0 }
 .cols2 >* { margin-right: -10px; }
 .cols3 >* { margin-right: -20px; }
 .cols4 >* { margin-right: -30px; }
 .cols5 >* { margin-right: -40px; }
 .cols6 >* { margin-right: -50px; }

<div class="cols4">
    <div class="⅙">This is my magnum opus</div>
    <div class="¼">I finally beat css</div>
    <div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>

关于html - CSS 流体列，固定边距； chalice 的 chalice ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7190768/