CSS-only：如何在填充剩余空间的两个div之间固定宽度的div？

这里有两种方法可以工作,两者都有警告(警告,都需要一个包装器)：

HTML

<section class="wrapper">
    <div class="column" id="a"></div>
    <div class="column" id="b"></div>
    <div class="column" id="c"></div>
</section>​​​​​​​​​​​

基础CSS

.column {
    height: 3em;
}

#a {
 BACkground-color: red;   
}
#b {
 BACkground-color: green;
}
#c {
 BACkground-color: blue;   
}

#b {
  width: 50px;   
}

CSS3方法：

.wrapper {
    display:box;
    box-orient:horizontal;
    box-align:stretch;    
}

#a,#b {
    box-flex:1.0;
}

注意事项：仅支持(至今)Firefox和Webkit(Chrome / Safari),都需要前缀规则.以上是有一天会有的.

这是一个演示,前缀为：http://jsfiddle.net/crazytonyi/cBVTE/

表格显示方式

.wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;

}    
.column {
    display: table-cell;
}

警告：IE没有开始支持这种显示类型,直到7或8.另一方面,担心用户旧版本的IE就像担心仍然关闭cookies和javascript的人.他们赶上或习惯了打破页面.结束徘徊！

以下是使用上述的演示：http://jsfiddle.net/crazytonyi/kM46h/

在这两种情况下,都不需要浮动或定位,只是愿意将中指给较老的浏览器.多少取决于你选择哪种方法.