使左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的宽度，溢出归因将解决这个问题。