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和div 并将div 放在中间。rightcenter

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