6

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

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

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

有一个解决方案在正确的元素上使用 float:right但它需要像这样重新排序元素：

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

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

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

4

6 回答 6

8

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

于 2013-08-16T16:20:41.893 回答
3

这是那种东西吗？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; }

于 2013-08-16T16:19:05.793 回答
1

您可以使用定位解决此问题

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

工作小提琴

于 2013-08-16T16:19:43.047 回答
0

使用display:table并table-cell为此工作良好。我确实必须添加一个包装.containerdiv，但这里有一个解决方案：

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;
}
于 2013-08-16T16:18:52.870 回答
0

我让它像这样工作：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。

于 2013-08-16T16:20:23.380 回答
0

尝试这个：

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

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

于 2013-08-16T17:40:32.713 回答