html - 左右浮动 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