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

JSFIDDLE

EDIT: Trying to achieve the opposite of this.
_{(instead of 2 fixed-width divs on the sides and one fluid-width div in the middle,
I'm trying to get 2 fluid-width divs on the sides and one div centered in the middle)}

编辑:试图实现与此相反的。 (而不是两侧的2个固定宽度的div和中间的一个流体宽度div,我试图在两侧得到2个流体宽度的div,而在中间有一个div)

I have 3 divs: A, B, and C.

我有3个div:A,B和C.

B needs to sit centered between A and C.

B需要坐在A和C之间的中心位置。

What I'm currently doing is pretty much matching what's going on above. But, if A, B, and C's container has an odd width, some browsers are rounding A and C's widths down and others up (leaving C 1px too long and 1px too short, respectively).

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

_{notice the extra pixel to the right of C}

注意C右边的额外像素

_{notice the space to the right of C is a pixel thinner.}

注意C右边的空间是一个像素更薄的像素。

I don't care how many nested divs I need, but I've been spending way too much time on this! If someone already has a sure-fire solution to this problem, please share!

我不在乎我需要多少嵌套div,但我花了太多时间在这上面!如果某人已经有了解决此问题的确定解决方案,请分享!

notes:
- A, B, and C's parent can't have overflow hidden.
- A, B, and C can't overlap (they have translucent png's)

注意: - A,B和C的父级不能隐藏溢出。 - A,B和C不能重叠(它们有半透明的png)

This is my starting point: JSFIDDLE

这是我的出发点:JSFIDDLE

5 个解决方案

#1

Here are two ways that work, both with caveats (warning, both require a wrapper):

这里有两种工作方式,都有警告(警告,都需要包装器):

HTML

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

Base CSS

.column {
    height: 3em;
}

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

#b {
  width: 50px;   
}

CSS3 Approach:

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

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

Caveat: Only supported (so far) in Firefox and Webkit (Chrome/Safari), both requiring prefixed rules. The above is what it will be someday.

警告:只支持(目前为止)Firefox和Webkit(Chrome / Safari),两者都需要带前缀的规则。以上就是有朝一日。

Here is a demo with prefixes: http://jsfiddle.net/crazytonyi/cBVTE/

这是一个带前缀的演示:http://jsfiddle.net/crazytonyi/cBVTE/

Table-Display approach

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

}    
.column {
    display: table-cell;
}

Caveats: IE didn't start supporting this display type until 7 or 8. On the other hand, worrying about users on older versions of IE is like worrying about people who still turn off cookies and javascript. Either they catch up or get used to pages breaking. End the pandering!

警告:IE直到7或8才开始支持这种显示类型。另一方面,担心旧版IE用户担心仍然关闭仍然关闭cookie和javascript的用户。要么他们赶上或习惯破页。结束迎合!

Here's a demo using the above: http://jsfiddle.net/crazytonyi/kM46h/

这是一个使用上面的演示:http://jsfiddle.net/crazytonyi/kM46h/

In both cases, no floats or positioning needed, just willingness to give the middle finger to older browsers. How old depends on which method you choose.

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

#2

i think you have to use like this..

我想你必须像这样使用..

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>

#3

EDIT: Please use Anthony's solution! It meets all of the requirements without any terribly hacky CSS! If you do need to support older browsers, feel free to use my solution (but, srrsly, Anthony's solution is perfect for most cases).

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

---

I don't know how I haven't tried this solution yet, but this seems to work even better than this question's accepted answer! No rounding!

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

solved!

If we think of the rounded 50% as a value (X) and constant width of B as value Y, then we need:

如果我们将舍入的50%视为值(X)并将B的常量宽度视为值Y,那么我们需要:

width of A = X
width of C = 100% - X

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

I decided to use this as my structure:

我决定用这个作为我的结构:

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

Q. How can we get C to have a width of container_width - X?
A. We give C a container called c_holder with width 100% and give C a left offset of X (50%).

问:如何让C的宽度为container_width - X?答:我们给C一个名为c_holder的容器,宽度为100%,给C左边的偏移量为X(50%)。

forget B for now...

现在忘了B ...

now we have 2 divs next to eachother... each roughly 50% but adding up to exactly 100%.

现在我们在彼此旁边有2个div ...每个大约50%,但加起来恰好100%。

Throw all of these into a container, and give this container a margin-right of Y (the width of the B div). now we have A and C next to eachother, but taking up 100% - Y of the width.

将所有这些放入容器中,并为此容器赋予Y的边距(B div的宽度)。现在我们有A和C紧挨着彼此,但占据了100% - 宽度的Y.

give c_holder a left offset of Y and drop B in between A and c_holder. apply a left float on A and B.

给c_holder一个Y的左偏移量,并在A和c_holder之间删除B.在A和B上应用左浮动。

now A's width is X, B's width is Y, C's total left offset is X + Y, and C's visible width is 100% of the container - X - Y.

现在A的宽度为X,B的宽度为Y,C的左侧偏移量为X + Y,C的可见宽度为容器的100% - X - Y.

kinda funky, but it's worked perfectly in IE7, Chrome, and Safari. I'll test FF later.

有点时髦,但它在IE7,Chrome和Safari中完美运行。我稍后会测试FF。

#4

demo on dabblet.com:

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

update: updated with no overlaping

更新:更新,没有重叠

#5

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