Question

我有两个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

虽然它不适用于＆lt; = 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

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

左div的右属性必须是右div的宽度，如果这些div在另一个div内，那么需要有overflow：hidden。在这种情况下，右边的div将浮动在右边，宽度为200px，左边的div将从右边框放置200px，尽管它有100％的宽度，如果超过容器div的宽度，溢出归因将解决这个问题。

使左div占用剩余宽度而不交换元素

6 个答案: