如何强制内联div保持在同一行？

我正在尝试制作三列布局。我希望左列和右列的宽度仅与其子项内容一样宽。我希望中心柱能够扩大以填充剩余空间。

我正在尝试以下操作（概述，下面包含 jsfiddle 链接）：

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

fiddle: http://jsfiddle.net/5kszQ/ http://jsfiddle.net/5kszQ/

但当内容太长时，中间的列会将右侧的列推到其下方。我希望所有三列都内联，并根据需要缩小中心列。这就是上面给我的：

相反，我想：

谢谢你的帮助

这是一种使用方法inline-block对于左侧和中间以及position:absolute为正确的元素。

jsFiddle http://jsfiddle.net/Tyriar/NMN5L/1/

HTML

<div id="parent" style="width:100%">
    <div id="colLeft">left</div><!--
    --><div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
    <div id="colRight">right</div>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
}
#parent {
    background-color: #eee;
    height: 48px;
    position:relative;
    overflow:hidden;
    white-space: nowrap;
}
#colLeft {
    background-color: #ff8b8b;
    height: 48px;
    display: inline-block;
}
#colCenter {
    background-color: orange;
    height: 48px;
    display: inline-block;
    overflow: hidden;
}
#colRight {
    background-color: #c3d0ff;
    height: 48px;
    display: inline;
    float: right;
    position:absolute;
    top:0;
    right:0;
}

由于它依赖于inline-block, 之间有一个注释<div>s 消除此图中所示的间距：

文本溢出：省略号

为了达到这个目的，当使用text-overflow:ellipsis您可能需要使用 JavaScript，这是一个可能的解决方案（jsFiddle http://jsfiddle.net/Tyriar/NMN5L/4/).

window.onresize = updateDimensions;

function updateDimensions() {
    var parent = document.getElementById('parent');
    var left = document.getElementById('colLeft');
    var right = document.getElementById('colRight');
    var middle = document.getElementById('colCenter');

    middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth)  + 'px';
}