html – 使left div占用剩余宽度而不交换元素

发布时间：2020-12-14 19:00:41 所属栏目：资源来源：网络整理

导读：我有两个div并排.右边的div有一个固定的宽度.即使窗口调整大小,左侧div也应填充剩余空间.例： +---------------------------------+ +---------------+| | | || divLeft | | divRight || - dynamic width - | | 120px || | | |+----------------------------

我有两个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的右侧.

解决方法

虽然它不适用于< = IE7,但显示：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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!