css - 三列 div 具有固定宽度的中心 div 和左右平均共享其余空间

Question

<div id="IWillShareTheRemainingWidthWithTheRightOne">left stuff</div>
<div id="IAmAFixedWidth">center stuff </div>
<div id="IWillShareTheRemainingWidthWithTheLeftOne">right stuff</div>

左边和右边将占据所有可用的剩余空间

这里有人问过这个问题，提出的解决方案对他有用，因为他只需要在左右设置背景。就我而言，我确实必须在左右 div 上放置一些内容。

我还看到了左侧固定而右侧占用其余空间的解决方案。我什至在左右两侧找到了一些解决方案，它们具有固定的宽度和剩余的中心。

但我还没有找到我真正需要的东西。

Answer 1

我在这个地方找到了解决方案 有人叫保罗，他多年前在博客上写过它

这是jsfiddle

<div id="IWillShareTheRemainingWidthWithTheRightOne">stuff on left</div>
<div id="IAmAFixedWidth">stuff on center</div>
<div id="IWillShareTheRemainingWidthWithTheLeftOne"> 
    <div id="insideOf3rd">    
        stuff on right
    </div>
</div>


#IAmAFixedWidth {
    width:100px;
    background:green;
    display:inline-block
}

#IWillShareTheRemainingWidthWithTheRightOne {
width:50%;
margin-right:-50px;
background:magenta;
float:left;
}

#IWillShareTheRemainingWidthWithTheLeftOne {
width:50%;
margin-left:-60px;
background:magenta;
float:right;
}

#insideOf3rd {
margin-left:50px;
}

Answer 2

给你的 div 一个 inline-block css。

div{display:inline-block;}
#IAmAFixedWidth {
    width:100px;
    background:green;
}

http://jsfiddle.net/DugGC/5/

编辑：
试试这个：

    div{display:table-cell; background: orange; }
    #content{width:550px; background: black; display: table}
    #IAmAFixedWidth {
        width:100px;
        background:green;
    }

http://jsfiddle.net/DugGC/6/