javascript - 将 div 设置为可用空间的其余部分

Question

我有一个父 div 和 2 个子 div(左子和右子)。 child-right div 将包含 1 个或 2 个图标，具体取决于动态页面要求。 child-left div 包含标题，也用作拖动操作的句柄。我不想设置宽度 px 或 %(比如下面的 90%)。如何设置 child-left div 以占用 child-right 占用后的剩余可用空间。

<div id="parent"> 
    <div id="child-left" style="width:90%"> 
        This is my title
    </div>
    <div id="child-right"> 
        <i class="fa fa-cog"></i>
    </div>
</div>

谢谢!

Answer 1

以下内容应该对您有所帮助:

HTML:

<div id="parent">
    <div id="child-right">Hey</div>
    <div id="child-left">This is my title</div>
</div>

CSS:

#child-left {
    border: 3px solid gray;
    background-color:blue;
    margin-left:0px;
    overflow:hidden;
}
#child-right {
    float:right;
    border-style:solid;
}
#parent {
    overflow:hidden;
}

DEMO JSFiddle