html - 让左边的 div 占用剩余的宽度而不交换元素

Question

我有 2 个并排的 div。右侧的 div 具有固定宽度。即使调整窗口大小时，左侧的 div 也应填充剩余空间。示例:

+---------------------------------+  +---------------+
|                                 |  |               |
|             divLeft             |  |    divRight   |
|       <- dynamic width ->       |  |     120px     |
|                                 |  |               |
+---------------------------------+  +---------------+

<div>
    <div id="divLeft">...</div>
    <div id="divRight">...</div>
<div>

有 a solution that uses float:right on the right element但它需要像这样重新排序元素:

<div>
    <div id="divRight" style="float: right; width: 120px;">...</div>
    <div id="divLeft">...</div>
<div>

是否有不需要重新排序元素的解决方案？我处于重新排序它们会导致其他问题的情况。我更喜欢 CSS/HTML 解决方案，但我愿意使用 Javascript/JQuery。

这是一个不工作的 JSFiddle我试图解决它。我正在尝试将蓝色 div 定位到绿色 div 的右侧。

Answer 1

虽然它不适用于 <=IE7，但 display:table-cell 似乎可以解决问题:

#divLeft {
    background-color: lightgreen;
    vertical-align: top;
    display:table-cell;
}
#divRight {
    display:table-cell;
    width: 120px;
    background-color: lightblue;
    vertical-align: top;
}

jsFiddle example