将div设置为剩余的可用空间

Question

我有一个父div和2个子div（child-left和child-right）。 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