水平分裂与其中一个占据空间的剩余

Question

关于在父div中水平布置2个div并且稍微扭曲的经典问题 - 其中一个div如何具有固定宽度（例如100px）而另一个占用剩余空间（例如100％）在同一行？

<div>
    <div id="div1" style="float: left; width: 100px; background-color: #ff0000;">
    &nbsp;
    </div>    
    <div id="div2" style="float: left; width: 100%; background-color: #00ff00;">
    &nbsp;
    </div>
</div>

小提琴说明：http://jsfiddle.net/mKH46/2/

Answer 1

请检查此FIDDLE

您的代码略有变化

<div>
    <div id="div1" style="float: left; width: 100px; background-color: #ff0000;">
     &nbsp;
    </div>    
    <div id="div2" style="width: 100%; background-color: #00ff00;">
     &nbsp;
    </div>
</div>

Answer 2

你正在寻找类似的东西吗？

jsfiddle

.container{
    width: 100%;
}
#div1{
    width: 100px;
    background: red;
    float: left;
}
#div2{
    background: green;
}