使左div占用剩余寬度而不交換元素

Question

我有兩個div並排。 右邊的div有一個固定的寬度。 即使窗口調整大小，左側div也應填充剩余空間。 例：

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

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

有一個解決方案使用float：右邊的元素，但它需要重新排序元素，如下所示：

<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例子

Answer 2

這是什么事嗎？ http://jsfiddle.net/KMchF/5/

#divLeft {
    float: left;
    overflow: hidden;    
    background-color: lightgreen;
    vertical-align: top;
    position: absolute;
    right: 120px;
}

#divRight {
    float: right;
    width: 120px;    
    background-color: lightblue;
    vertical-align: top;
}

之后我添加了一個清除div ，所以你可以繼續使用頁面的其余部分，否則元素將在div { position: absolute; } div { position: absolute; }

Answer 3

您可以使用定位解決此問題

#divLeft {
    background-color: lightgreen;
    width: 100px;
}
#divRight {
    position: absolute;
    top: 0;
    left: 100px;
    right: 0;
    background-color: lightblue;
}
body {   /* or parent element */
    position: relative;        
}

工作小提琴

Answer 4

使用display:table和table-cell可以很好地工作。 我確實需要添加一個包裝.container div，但這是一個解決方案：

http://jsfiddle.net/NmrbP/2/

.container {
    display:table;
}
#divLeft {
    overflow: hidden;

    background-color: lightgreen;
    vertical-align: top;
    display:table-cell;
}

#divRight {
    width: 120px;

    background-color: lightblue;
    vertical-align: top;
    display:table-cell;
}

Answer 5

我得到它像這樣：HTML：

<div id="divLeft">
    [divLeft]
    Lorem ipsum dolor sit amet, omnes molestie repudiandae eos cu, doming dolorum nonumes has ad. Magna ridens et his, eripuit salutatus sententiae te ius. Ludus accumsan ea usu, ea sed meliore maiorum molestiae, has facer dolore ornatus ut. Eam adhuc platonem mnesarchum ad, mei autem fuisset electram ei. Hinc omnesque eu mei. Ut sit odio melius aperiri, ei mei legere eruditi.<br/>

    Mel te sale vitae putant, diceret nusquam est an. Ad melius legimus vel. Eum dicam primis persecuti ea, ne alia unum partiendo nec. Ferri tollit docendi et pro, usu vide putant eirmod et. Qui an nostrud dolorum. Sea modo case fugit ea, mea te autem doming dolorum.
</div>

<div id="divRight">
    [divRight]
    Sit no doctus invenire. Sint consequuntur mei ne, an mea perpetua omittantur conclusionemque. Quaestio platonem no pro. Mei choro oblique mandamus ea, dicat vivendo eloquentiam in eam. Ne pro velit ceteros.<br/>

Quem consulatu te pro, albucius menandri et sit. Ne vis nibh nominavi atomorum. Eu pri enim omnes. Iisque vidisse cotidieque ius eu, in fierent dissentiet sed, cu eam sensibus honestatis.
</div>

CSS：

#divLeft {
float: left;
overflow: hidden;
width: 80%;
background-color: lightgreen;
vertical-align: top;
}
#divRight {
    float: right;
    width: 15%;

    background-color: lightblue;
    vertical-align: top;
}

工作JSFiddle 。

Answer 6

嘗試這個：

.div_left{
    width:100%;
    height:100px;
    position:absolute;
    top:0px;
    right:200px;
}
.div_right{
    width:200px;
    height:100px;
    float:right;
    background-color:red;
}

左div的右邊屬性必須是右邊div的寬度，如果這些div在另一個div內，那么需要有溢出：隱藏。 在這種情況下，右邊的div將浮動在右邊，寬度為200px，左邊的div將從右邊框放置200px，盡管它有100％的寬度，如果超過容器div的寬度，溢出歸因將解決這個問題。