使左 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

虽然它不适用于 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

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; } 下

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;        
}

Working fiddle

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;
}

left div 的 right 属性必须是 right div 的宽度，如果这些 div 在另一个 div 内，则需要溢出：隐藏。在这种情况下，右侧 div 将浮动在右侧，宽度为 200px，左侧 div 将放置在距离右边框 200px 处，尽管它的宽度为 100%，但如果它超过了容器 div 的宽度，属性溢出将解决该问题。