Html 跨度的动态宽度

这是我的代码（请参阅）：

HTML

<div id="container">
    <span id="left">Left text</span>
    <span id="middle">Very very very very very long middle text.</span>
    <span id="right">Right text</span>
</div>

---

我希望

#middle

的宽度随着窗口变小而缩小，以便在使用jQuery/Mootools等库时不会与

#right

冲突

然后，这将非常简单，请参见此处（使用jQuery）：

---

如果您正在使用jQuery/Mootools等库

然后，这将非常简单，请参见此处（使用jQuery）：

---

我使用了sandeep的例子：

---

overflow:hidden

仅在使用

height

时有效。它有点脏，但在没有任何JS的情况下运行良好。

我使用了sandeep的示例：

---

overflow:hidden

仅在使用

height

时有效。它有点脏，但是在没有任何JS的情况下工作得很好。

只要它是一个跨距，它是内联的，所以它不会被包装。为什么它不是一个DIV？@ChristianWattengård：我很高兴使用DIV，如果你能让它工作的话！我也很乐意使用

内联块

。有什么原因，为什么不使用固定宽度的左和右？如果没有，那就没什么问题了，对吧？@Sn0opy:我可以让左固定宽度，但不是右。你能举个例子吗？只要它是一个跨距，它是内联的，所以它不会换行。为什么它不是一个DIV？@ChristianWattengård：我很高兴使用DIV，如果你能让它工作的话！我也很乐意使用

内联块

。有什么原因，为什么不使用固定宽度的左和右？如果没有，那就没什么问题了，对吧？@Sn0opy:我可以让左固定宽度，但不是右。你能举个例子吗？

#container {
    white-space: nowrap;
    position: relative;
}

#left {
    border: solid 1px red;
}

#middle {
    border: solid 1px green;
}

#right {
    border: solid 1px blue;
    position: absolute;
    right: 0px;
}