Html CSS流体列，固定边距；圣杯中的圣杯 更新和总结

我觉得有义务把这个问题说得更清楚，因为现在有了悬赏

（另外，我很确定，当支持

calc（）

CSS3单位值时，这将是儿戏，比如

width:calc（25%-5px）

；尽管那时我们可能会在脑海中浏览互联网）

我正在为一些共享设计需求的项目开发CSS框架；即流体12列布局。使用浮动的

.column

元素，其百分比宽度为

（100%/12）x colu size

，这相当容易。然而，问题是在列之间增加了固定的边距（或任何形式的间距）

我最初的尝试使用了如上所述的流体列，每个列中嵌套了一个

.panel

子列。下面是HTML/CSS代码段（为简洁起见减少）：

.column{
浮动：左；
显示：内联块；
}
.width-01{宽度：8.3333%；}
.width-02{宽度：16.6666%；}
.width-03{宽度：25%；}
/*等*/
.小组{
宽度：100%；
填充物：5px；
框大小：边框框；/*因此填充不会增加宽度*/
}

宽度-02
宽度-03
宽度-02
宽度-05

此代码段将生成与下图类似的布局，但是所有

.panel

元素的所有侧面都有

5px

填充我试图使外部列的内容边缘与视图端口（或父容器）的边缘齐平。。另一种方法是完全消除

.panel

类，只使用列：

.column{
浮动：左；
显示：内联块；
左侧填充：10px；
框大小：边框框；
}
.列：第一个子项{左填充：0px；}
.width-01{宽度：8.3333%；}
.width-02{宽度：16.6666%；}
.width-03{宽度：25%；}
/*等*/

Width-02
宽度-03
宽度-02
宽度-05

同样，这很好，产生的结果更接近下图，但是现在（实际）的问题是，填充正在侵蚀列的宽度，扭曲了宽度分布。

：第一个子列

的内容区域宽度比其同级多10个像素（或任意边距大小）。

这似乎是无害的，甚至是不明显的；然而，在一些情况下，元素之间的宽度分布（尽可能精确）要么是必要的，要么会使事情变得更简单

因此，是否使用填充、边距或其组合；对于固定边距的流体列，是否有任何解决方案，能够均匀地分配边沟空间，从而不会从相邻列中抢走“边缘”（***哈哈*）内容区域**

---

原始问题 由于在我的搜索和尝试中缺乏结果，我认为这是不可能的。如果任何地方都能给出答案，我肯定它就在这里

有没有办法使用纯CSS实现具有固定宽度边距的流畅宽度列布局？

重要提示：此图只是一个示例，而不是我希望实现的具体布局。给定的解决方案应允许相邻柱的任意组合，总宽度分布不超过12。考虑流行的参考文献）

注意：在12列布局中，图像中各列的宽度分布分别为2、3、2和5

到目前为止，我已经求助于一个网格，使用百分比，几乎可以实现这一点。问题是，为了获得边距，每列都需要一个子项（我称之为

.panel

），该子项具有：

宽度：100%；
框大小：边框框；
填充：10px；

这也差不多是好的；这种方法的问题是，第一列和最后一列有外部“边距”（

10px

），每列之间的“边距”加倍（

2 x 10px

）

当然，通过包含新的CSS3

calc（）

value类型，可以更轻松地解决这个问题。朝以下方向发展的事物：

.width-12>面板{宽度：100%；}
.width-09>.panel{
宽度：钙（75%-10px）；
保证金：。。。；
}

我已经修复了一些Javascript，我已经破解了一些“有效”的东西，但我正在进行一项探索。希望最神圣的圣杯存在

不幸的是，下面的解决方案和@avall提供的解决方案（尽管在简化方面确实是一个不错的选择）并不是我想要的。主要问题是，各列之间的边距分布不均匀

我能看到这种效果的唯一方法是将

.panel

填充减少到

5px

以及类似的内容：

.column:first child>.panel{
左侧填充：0px；
}
.column:last child>.panel{
右边填充：0px；
}
/*没有必要吗？无论如何，我还没有测试过*/
.column:独子>.panel{
右边填充：0px；
左侧填充：0px；
}

此解决方案不可接受，只是因为IE8无法识别

：last child

（就此而言

：only child

）伪选择器。

为什么不使用

.column > .panel {
    padding: 10px 0 10px 10px;
}

.column:first-child > .panel {
    padding-left: 0px;
}

---

它只在盒子之间留出10px的空间，不使用最后一个子元素。

试试这个纯CSS2解决方案：

基本CSS（不含化妆品）：

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中的Win7上进行测试

---

更新： 现在，如果希望使用任意数量的列，则必须向容器中添加一个额外的类，指定列数：

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

请参见演示各种列计数

可能的错误：

<div id="wrap">
    <div class="col small"></div>
    <div class="col medium"></div>
    <div class="col small"></div>
    <div class="col large"></div>
</div>

/* 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>

/* 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;
}

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

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

.pure-g.spacing {
    margin: 0 -10px;
}

.pure-g.spacing [class *= "pure-u"] > div {
    margin: 10px;
}