CSS液柱，固定边距; 圣杯的圣杯
更新和总结
我觉得有必要把这个问题更清楚一些，现在有一个奖金。
（ 另外，我非常确定，当calc() CSS3单元值被支持时，这将是孩子们的玩法，像width: calc(25% - 5px) ;尽pipe我们可能会在我们的脑海中浏览互联网那点 ）
我正在为一些共享devise需求的项目开发CSS框架。 即stream体12列布局。 使用百分比宽度为(100% / 12) x col_size浮动.column元素，这是相当容易的。 但是，问题随着列之间的固定边距（ 或任何forms的间距 ）的增加而增加。
我最初的尝试使用了所描述的stream体列，每个嵌套了一个.panel子.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-child列有10个像素（ 或者任何边距大小 ）比其兄弟更大的内容区宽度。
这看起来似乎无害，甚至不明显。 然而有一些情况下，元素之间具有精确 （ 尽可能精确 ）的宽度分布是必要的，或者使得事情变得更容易。
所以， 无论是使用填充，保证金还是其组合， 是否有任何解决stream体柱，固定的边际， 均匀分布的排水沟空间，不会抢夺相邻列“边缘”（*** haha * ）的内容区？**
原来的问题
由于我的search和尝试结果简单，我认为这是不可能的。 如果任何地方能够得出答案，我肯定它在这里。
有没有什么办法，使用纯CSS，实现一个固定宽度边距的stream体宽度圆柱布局？
重要提示 ：这个图只是一个例子，而不是我想要达到的具体布局。 给定的解决scheme应该允许相邻列的任意组合，总宽度分布总共为12或更小。 考虑stream行的960网格作为参考。）
注意 ：在12列布局中，图像中列的宽度分布分别为2,3,2和5。
到目前为止，我已经使用一个网格，使用百分比， 几乎完成了这一点。 问题是，为了实现边距，每列需要一个额外的孩子（ 我称之为.panel ）：
width: 100%; box-sizing: border-box; padding: 10px;
这又差不多了 ， 这个方法的问题是，第一列和最后一列有外边距（ 10px ），每列之间的“边距”加倍（ 2 x 10px ）
当然，包含新的CSS3 calc()值types，可以更容易地解决这个问题。 某事方向：
.width-12 > .panel{ width: 100%; } .width-09 > .panel{ width: calc(75% - 10px); margin: ...; }
我有一些JavaScript的修复，我已经破解了一些“有用”的东西，但我在寻求。 希望最神圣的Grails存在。
下面的解决scheme，和一个@avall提供（虽然当然是一个很好的select简化）不幸的是不是我在找什么。 主要问题是，利润率不是在列之间平均分配的。
我可以看到这个工作的唯一方法是减less.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; }
这个解决scheme是不可接受的，只是因为IE8没有认识到:last-child （ 和那个问题:only-child ）伪select器。
我终于想通了。 在过去的十年里，在数百个小时内浪费了数百小时（尽pipe我依靠的是一些不会在一年前工作的css）。 我解决了它没有任何陷阱。 并在IE8 +。
请准备2001年：太空奥德赛音乐，因为我登陆这艘船。
这种方法的天才和诀窍是使用内嵌块元素，然后使用字间距来使用负右边距进行平衡。 它自己的负右边距将拉起元素在一起，让你有100％的宽度设置，仍然适合之间的事情，但离开元素重叠。 在父项上设置负边距只是在与总宽度（魔术“我们试图击中的”100％宽度“标记”）交互的效果方面取消了子边距。填充仅用于增加元素的大小对于反作用的保证金而言是无用的，它经常在陪审团的解决scheme中用盒子大小的方式来解决这个问题，其代价是失去了使用填充的能力，否则（和保证金），可能需要更多包装元素。
字间距提供了添加或去除两个元素之间的水平距离的神奇“第三种方法”，只要它们是内联块，因为在这种情况下它们将被计数为单个“字”，并且任何两者之间的空白将会一起向下一个单一的可控“字间距”属性。 除了这一招，我不知道另一种方式来获得这个100％的结果。
我虚心地提出了固定排水pipe柔性柱问题的最终答案。 我在此命名我的解决scheme“欧米茄机动”。 它具有处理任意混合宽度列的能力（加总高达100％的总宽度，精确或略小于四舍五入），任何装订线的大小，任何预定义的宽度列数量，处理任意数量的行自动换行，以及使用内嵌块元素，因此提供了内嵌块附带的垂直alignment选项，并且不需要任何额外的标记，只需要容器上的一个类声明（不包括定义列的宽度）。 我认为代码本身就是有说服力的。 这里是2-6列的代码实现，使用10px的排水沟和奖金助手类的百分比。
编辑：有趣的难题。 我设法得到两个稍微不同的版本; 一个用于Mozilla和ie8 +，另一个用于webkit。 似乎字间距技巧在webkit中不起作用，我不知道为什么其他版本在webkit中工作，但不是ie8 + / mozilla。 把两者结合起来就可以覆盖所有的事情，而且我敢打赌，有一种统一这种策略的方法，或者是与解决这个问题非常相似的方法。
编辑2：大部分得到它！ 神奇的text-align: justify几乎在那里得到了字间距的WebKit。 这个间距似乎有点小，就像是右边的像素，也许还有一个额外的排水沟。 但它是可用的，保持列比我以前用过的任何东西都更可靠。 它永远不会减less到更less的列，它会压缩，直到浏览器得到一个水平滚动条。
编辑3：有点接近完美。 将字体大小设置为0可以使剩余空间的大部分剩余问题标准化。 如果字体大小为0，现在就要修复IE9。
编辑4：得到了一些其他stream体宽度post的答案： -ms-text-justify: distribute-all-lines 。 testing在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%; }
你可以在这里荣耀的领域见证我的伟大作品： http : //jsfiddle.net/xg7nB/15/
<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>
以绝对最小的实现为例，使用4个等宽（25％）宽的cols和10px的排水沟就像这样：
.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>
Soooo这个代码基本上取代了几乎所有现有的网格框架吗？ 如果你可以任意设置排水沟，然后创build100％宽度的列，那么严格来说优于大多数/所有的网格框架，事实上不是吗？ 如果你不像IE7那样开发IE7，那么就和盒子大小相结合：border-box渲染填充和边框也不是问题。
编辑：哦，你想要与容器的两侧齐平。 没有问题，我不得不专门添加边排水沟，所以我们可以改变一些值10和摆脱填充和瞧。 http://jsfiddle.net/bTty3/
[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; }
相同的HTML
<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>
试试这个纯粹的CSS2解决scheme： 演示小提琴
基础CSS （ 小提琴没有化妆品） ：
html, body { padding: 0; margin: 0; } #wrap { padding-right: 30px; overflow: hidden; } .col { float: left; margin-left: 40px; margin-right: -30px; } .col:first-child { margin-left: 0; } .small { width: 16.66%; } .medium { width: 25%; } .large { width: 41.66%; }
HTML：
<div id="wrap"> <div class="col small"></div> <div class="col medium"></div> <div class="col small"></div> <div class="col large"></div> </div>
在IE7，IE8，IE9，Opera 11.50，Safari 5.0.5，FF 6.0，Chrome 13.0上testingWin7。
更新：
现在，如果您喜欢使用任意数量的列，则必须向指定列数的容器添加一个额外的类：
<div class="cols-12 count-04"> <div class="col width-02"></div> <div class="col width-03"></div> <div class="col width-02"></div> <div class="col width-05"></div> </div>
看到这个更新的小提琴展示了各种列数。
可能的错误：
从理论上讲，这个解决scheme应该适用于任何浏览器窗口宽度中的每个可能的最小列宽的任意数量的列。 但是，似乎所有浏览器都无法处理：1.大量1列宽的列，或2.小的浏览器窗口宽度。
请注意，最小宽度为1440像素的所有浏览器（等于12像素120像素（所有10像素边距占用的空间））都能很好地处理解决scheme。 而当您使用2列以上的列宽度时，对最小浏览器宽度的要求的确降至720像素（6 * 120像素）。 这最后一种情况听起来更为现实，但仍然无法解释这种浏览器行为。
我试图通过引入额外的最后一个列类来解决这个问题，如小提琴演示，但它不能解决小浏览器宽度的问题。 它可以解决由于宽度百分比损坏而引起的小圆化错误，但是这个问题可以忽略不计。
我想听听其他的CSS专家，所以我加了一个赏金。
你为什么不使用
.column > .panel { padding: 10px 0 10px 10px; } .column:first-child > .panel { padding-left: 0px; }
它只会在盒子之间产生10px的空格，而不会使用最后一个孩子。
查看thirtydot的答案在这个线程纯CSS / HTML（液体布局等距“列”没有JavaScript）…
具有等间距DIV的stream体宽度
http://jsfiddle.net/thirtydot/EDp8R/
JSFiddle的修改表明，“列”可以被制成不同的固定宽度，并且仍然具有相等且stream畅的边距。
最后，另一个例子使用百分比，同时保持平等和stream畅的利润率。
我意识到这可能不是一个确切的解决scheme，但它让你非常接近。
在提到原来的问题“有什么办法，使用纯粹的CSS来实现一个固定宽度边界的stream畅宽度的柱面布局？
用这样的问题CSS非常困难是非常重要的。 在过去的一周里，我一直在研究一个“基础模板”来创build自己的“圣杯”，包括边界，边距和填充等等。似乎CSS在这类问题上失败了。 虽然这个问题很简单，但在CSS中几乎不可能实现，特别是跨浏览器。
有趣的是，这些问题很容易通过使用表格来解决。 我不明白为什么我们被networking社会逼得用div来代替“语义”和“简单概述”这样的模糊论点，因为大多数论据都是虚弱甚至虚假的。 人们说桌子比较麻烦，显然不了解CSS中的真正困难。
无论如何，如果你想有一个表结构（作为colums是一个表的一部分），我build议使用“显示：表”。
要使用纯CSS实现原始问题下的图像，可以使用以下内容：
CSS
html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; overflow: auto; } .table{ background: pink; display: table; width: 100%; height: 100%; } .tableRow{ display: table-row; } .tableCell{ display: table-cell; vertical-align: top; height: 100%; } /* Ensures the full size of the table-cell has the behaviour of a block-element. This is needed, because 'table-cell' will behave differently in different browsers. */ .tableCell>div{ height: 100%; } /* Padding has to be used instead of margin in 'border-box' modus. */ .tableCell>div>div{ height: 100%; box-sizing:border-box; -moz-box-sizing:border-box; } /* The final content. */ .tableCell>div>div>div{ background: lightblue; padding: 5px; height: 100%; box-sizing:border-box; -moz-box-sizing:border-box; } #col1{ width: 16.66%; } #col1>div>div{ padding-right: 10px; } #col2{ width: 25%; } #col2>div>div{ padding-right: 10px; } #col3{ width: 16.66%; } #col3>div>div{ padding-right: 10px; } #col4{ width: 41.66%; }
HTML
<div class="table"> <div class="tableRow"> <div id='col1' class="tableCell"> <div><div><div>16.66%</div></div></div> </div> <div id='col2' class="tableCell"> <div><div><div>25%</div></div></div> </div> <div id='col3' class="tableCell"> <div><div><div>16.66%</div></div></div> </div> <div id='col4' class="tableCell"> <div><div><div>41.66%</div></div></div> </div> </div> </div>
我会说这是相当过度使用额外的div只是一个保证金，但不幸的是，CSS没有“保证金框”的模式，这实际上可以解决十亿个问题。
嵌套代码的这个数量可能会让你想'为什么不使用其他技术？ 因为这可能导致更less的代码。 对于一个非常具体的愿望将是这种情况。 但是，其他技术通常涉及浮动或绝对定位。 这些技术不能达到同样的效果：例如浮动可以实现长度相等的柱面，但是当你想要一个边框或边距时，你会发现自己陷入困境。 对于绝对定位，它更像是相反的：你可以解决边缘问题，但高度只能基于一列。
在我看来，CSS没有达到要求。 虽然这是取代表格positiong，这些年来，仍然是不可能得到相同的结果。 为了达到圣杯的圣杯不仅是最简单的方法，也是唯一的方法……至less在我尝试了数百种可能性之后我知道。
剩下的问题是：如果你使用div作为表格，为什么要使用div？ 我不完全了解自己，但人们似乎有他们的理由。
我用这个OOCSS的网格
https://github.com/stubbornella/oocss
我最近在自己的网站上演示了一个在线演示，因为没有适当的例子在线:(
http://www.leipeshit.com/awesome_stuff/oocss/core/grid/grids_all.html
获得相同效果的一种更简单的方法是让列内的内容创build您的阴影线，而不是对列自身应用边距/填充。 这可以通过固定的，stream体的，弹性的等等来完成。
例如：
/* Gutters */ h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr, address, pre, object, fieldset { margin-right: .75rem; margin-left: .75rem; padding-right: .75rem; padding-left: .75rem; }
这也简化了您的列的大小，嵌套和应用背景到您的乐高片。
为什么不使用第一个示例中的填充，然后在所有元素上设置框大小：边框？
我最近开发了一个替代解决scheme，它允许在一行中的任何灵活的列的组合，所有列的固定和一致的保证金，无论父元素的宽度。
这不使用任何JavaScript，并在IE8 +中工作。
在这个解决scheme中，保证金是在两个类别上定义的 – 所以很容易将其更改为响应式devise。 列宽也代表它们使用的空间，例如2列的宽度为50％，4列的宽度为25％。
你可以在http://www.andrewjamestait.co.uk/conflexgrids/看到一个例子;
或者可以在https://github.com/andrewjtait/conflexgrids上的GitHub上find
如果你可以与每列另一个嵌套的div生活，你可以为每个定义所需的边距。 为了摆脱左边和右边的边缘，您可以在外层容器上定义一个负边距。
例如：使用pureCSS pure-g是外部容器，pure-u- *是包含嵌套div的列节点（display：inline-block）。 间距是pureCSS网格系统的自定义扩展的名称，以允许列边距。
.pure-g.spacing { margin: 0 -10px; } .pure-g.spacing [class *= "pure-u"] > div { margin: 10px; }
应该适用于大多数浏览器。 告诉我，如果它不 – 我已经使用它。
问候，最大
