水平划分，其中一个空间剩余 [英] Horizontal Divs with One of Them Taking Remainder of Space

问题描述

经典问题是在父div中水平布局2 div，并稍微扭曲 - 其中一个div如何具有固定宽度（例如100px），另一个占据剩余空间（例如100％）在同一行上？

Classic question on laying out 2 divs horizontally within a parent div with a slight twist - How can one of the divs have a fixed width (e.g. 100px) and the other taking up the remaining space (e.g. 100%) on the same line?

<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/

推荐答案

请检查这 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>

这篇关于水平划分，其中一个空间剩余的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！