JSFIDDLE
编辑：试图实现与this的相反.(而不是在两边的两个固定宽度的div和一个流体宽度的div在中间,我试图得到两个流体宽度的div两侧和一个div集中在中间)
我有3个div：A,B和C.
B需要以A和C为中心.
我目前正在做的是与上面发生的事情相匹配.但是,如果A,B和C的容器有一个奇数的宽度,一些浏览器将A和C的宽度向下舍弃,而其他浏览器分别为C 1px太长,1px太短.
注意C右侧的额外像素
注意C右侧的空间是一个像素更薄的.
我不在乎我需要多少嵌套div,但是我已经花了太多的时间在这个！如果有人已经有这个问题的确切解决方案,请分享！
笔记：
– A,B和C的父对象不能隐藏溢出.
– A,B和C不能重叠(它们有半透明的png)
这是我的出发点：JSFIDDLE
解决方法
这里有两种方法可以工作,两者都有警告(警告,都需要一个包装器)：
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/
在这两种情况下,都不需要浮动或定位,只是愿意将中指给较老的浏览器.多少取决于你选择哪种方法.
