浮动的左右div之间的宽度为100％

Question

我在左侧和右侧都有一个div，两个都是固定宽度。我有一个中间div女巫也固定宽度。我希望中间div保持在左右div的中间，无论屏幕重新分辨，所以从左到中div的空间和从中到右div的空间总是相同的。我怎么能这样做？

这是我到目前为止所得到的：

HTML：

<div id="container">
    <div id="left">
    </div>
    <div id="content">
    </div>
    <div id="right">
    </div>
</div>

CSS：

div{
    border: 1px solid black;
    height: 200px;
}
#container{
    width: 100%;
}
#left{
    width: 50px;
    float: left;
}
#content{
    width: 150px;
    float: left;
    margin: 0 auto;
}
#right{
    width: 100px;
    float: right;
}

http://jsfiddle.net/Y5ZCT/

Answer 1

您可以绝对定位left和right div，并在中间放置center div。

HTML

<div id="container">
    <div id="left"></div>
    <div id="content"></div>
    <div id="right"></div>
</div>

CSS

div {
    border: 1px solid black;
    height: 200px;
}
#container {
    width: 100%;
    position: relative;
}
#left {
    width: 50px;
    position: absolute;
    left: 0;
    top: 0;
}
#content {
    width: 150px;
    margin: 0 auto;
    border:1px solid #f00;
}
#right {
    width: 100px;
    position: absolute;
    right: 0;
    top: 0;
}

JSFiddle