编辑：尝试实现与此内容相反的效果。
（不是两个固定宽度的侧边div和一个流体宽度的中间div，而是想要在两侧有两个流体宽度的div，中间有一个div居中）
我有三个div：A、B和C。
B需要居中放置在A和C之间。
目前我的做法基本上与上面的示例相匹配。但是，如果A、B和C的容器宽度是奇数，一些浏览器会将A和C的宽度向下取整，而另一些浏览器则向上取整（导致C长度分别长1像素和短1像素）。
注意C右侧的额外像素
注意C右侧的间距比较窄。
我不在乎需要多少个嵌套的div，但是我已经花了太多时间在这上面了！如果有人已经找到了解决此问题的方法，请分享一下！
注：
- A、B和C的父元素不能设置overflow hidden。
- A、B和C不能重叠（它们具有半透明png）
这是我的起点：JSFIDDLE
以下是两种可行的方法，但都需要注意（警告：两种方法都需要一个包装器）：
<section class="wrapper">
<div class="column" id="a"></div>
<div class="column" id="b"></div>
<div class="column" id="c"></div>
</section>
.column {
height: 3em;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
background-color: blue;
}
#b {
width: 50px;
}
.wrapper {
display:box;
box-orient:horizontal;
box-align:stretch;
}
#a, #b {
box-flex:1.0;
}
.wrapper {
display: table;
width: 100%;
table-layout: fixed;
}
.column {
display: table-cell;
}
编辑：请使用Anthony的解决方案！它满足所有要求，没有任何可怕的hacky CSS！如果您确实需要支持旧浏览器，请随意使用我的解决方案（但是，真的，Anthony的解决方案对于大多数情况都是完美的）。
我不知道为什么我还没有尝试过这个解决方案，但这似乎比this问题的被接受答案更好！没有四舍五入！
如果我们将四舍五入的50%视为一个值（X），并将B的常数宽度视为值Y，那么我们需要：
A的宽度= X
C的宽度= 100% - X
我决定将其用作我的结构：
<container>
<a></a>
<b></b>
<c_holder>
<c>
</c>
</c_holder>
</container>
问：如何使C的宽度为container_width - X？
答：我们给C一个容器，称为c_holder，宽度为100%，并给C一个左偏移量X（50%）。
现在暂时忘记B...
现在我们有两个相邻的div...每个大约50%，但总共正好是100%。
将所有这些放入一个容器中，并给该容器一个右边距Y（B div的宽度）。现在我们有A和C相邻，但占据100% - Y的宽度。
给c_holder一个左偏移量Y，并将B放在A和c_holder之间。在A和B上应用左浮动。
现在A的宽度是X，B的宽度是Y，C的总左偏移量是X+Y，而C的可见宽度为容器的100％-X-Y。
有点奇怪，但在IE7、Chrome和Safari中完美运行。稍后我会测试FF。
我认为你需要像这样使用...
HTML
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
CSS
.a
{
width:50%;
height:25px;
background-color:#0F0;
float:left
}
.b
{
width:13px;
height:25px;
background-color:#FFF;
margin-left:-6px;
float:left;
position:relative;
z-index:99;
}
.c
{
width:50%;
height:25px;
background-color:#C33;
margin-left:-7px;
float:left;
}
</style>
<style>
.a{ width:50%; height:25px; background-color:#0F0; float:left }
.b{ width:13px; height:25px; background-color:#FFF; float:left;
position:relative; left:51%;}
.c{ width:50%; height:25px; background-color:#C33; float:right; }
</style>
http://img838.imageshack.us/img838/6116/cff430b799254087b6ec991.png
HTML：
<div id="main">
<div class="half left">
<div>
<div id="a" class="col"> </div>
</div>
</div>
<div class="half right">
<div>
<div id="c" class="col"> </div>
</div>
</div>
<div id="b" class="col"> </div>
</div>
CSS：
#main {
height: 40px;
width: auto;
border: 1px solid #cfcfcf;
position: relative;
}
.half {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.half.left { left: 0; }
.half.right { right: 0; }
.half > div {
height: 100%;
padding:0 8px;
}
.half.left > div { padding-left: 7px; }
.half.right > div { padding-right: 7px; }
.col {
height: 100%;
margin-top: 3px;
}
#a,
#c {
background-color: green;
}
#b {
background-color: red;
margin-left: auto;
margin-right: auto;
width: 14px;
}
更新：已更新，无重叠