Question

JSFIDDLE

编辑：试图达到this。_{的反面（而不是两侧的2个固定宽度的div和中间的一个流体宽度div）我试图在两侧获得2个流体宽度的div，并且在中间设置一个div}

我有3个div：A，B和C.

B需要在A和C之间居中。

What I need to do

我目前正在做的事情与上面发生的情况非常匹配。但是，如果A，B和C的容器具有奇数宽度，则某些浏览器将A和C的宽度向下舍入而其他浏览器向上舍入（分别为C 1px太长和1px太短）。

_{注意 C}右侧的额外像素

_{注意 C 右侧的空格是一个更薄的像素。}

我不在乎我需要多少嵌套div，但我花了太多时间在这上面！如果有人已经找到解决此问题的可靠解决方案，请分享！

注释：
- A，B和C的父母不能隐藏溢出 - A，B和C不能重叠（它们有半透明的png）

这是我的出发点： JSFIDDLE

Answer 1

以下两种方法有效，都有警告（警告，都需要包装）：

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用户担心仍然关闭仍然关闭cookie和javascript的用户。他们要么赶上，要么习惯了破页。结束迎合！

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

在这两种情况下，都不需要浮动或定位，只是愿意将中指放到旧浏览器上。多大程度取决于您选择的方法。

Answer 2

编辑：请使用Anthony的解决方案！它满足所有要求，没有任何非常hacky CSS！如果您确实需要支持旧版浏览器，请随意使用我的解决方案（但是，在大多数情况下，安东尼的解决方案非常适合。）

我不知道我还没有尝试过这个解决方案，但这似乎比this问题的接受答案更好！没有四舍五入！

solved!

如果我们将舍入的50％视为值（ X ）并将B的常量宽度视为值 Y < / strong>，然后我们需要：

宽度A = X
宽度C = 100％ - X

我决定用它作为我的结构：

<container> <a></a> <b></b> <c_holder> <c> </c> </c_holder> </container>

Q值。如何让C的宽度为 container_width - X ？
答：我们给C一个名为c_holder的容器，宽度为100％，给C左偏移 X （50％）。

现在忘了B ......

现在我们在彼此旁边有2个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。

Answer 3

我认为你必须这样使用..

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

Answer 4

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

Answer 5

demo on dabblet.com：

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

更新：已更新，没有重叠

仅限CSS：如何将填充剩余空间的两个div之间的固定宽度div居中？

5 个答案:

HTML

基本CSS

CSS3方法：

表格 - 显示方法