html - 调整跨度以填充 div 中的剩余宽度

Question

我目前有以下html结构

<div>
    <span id="a">
        Some text
    </span>
    <span id="c">
        <span id="resizable">
            Some text...
        </span>
        <span id="b">
            <img>
        </span>
    </span>
</div>

我希望 div 内的所有内容都在一行中(不应包裹任何内容)并且 div 应完全位于容器内。 #a 和#b 的内容应完整显示，但可以调整#resizable 范围的大小以适应剩余空间。如果里面的文字不能完全显示，那么overflow应该用省略号代替。

我很难把所有东西都装进容器里。如果 #resizable 中的文本太长，整个 div 会流到容器外，因为我似乎无法让 #resizable 正确调整大小。

有人对如何实现这一目标有任何想法吗？

编辑

这是我到目前为止的 css

#resizable {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.c {
    display: inline-block;
}

Answer 1

试试这个尺寸(所有 CSS):

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}
#a {
    color: #F00;
    display: block;
    float: left;
    margin-right: 10px;
}
#c {
    display: block;
}
#b {
    display: block;
    float: right;
}

http://jsfiddle.net/markdelorey/XUBYt/