html - 设置像素 div 后填充 div 的其余部分

Question

我有一个不同宽度的 div。里面还有另外两个，一个是固定宽度，另一个应该填满该区域的其余部分。但我不能让它总是填满。根据外盒的宽度，它要么太小，要么太大并低于 inner-box-1。如何让 inner-box-2 填充外盒的其余部分？

http://jsfiddle.net/Y57YP/

HTML

<div id ="outer-box">
   <div id="inner-box-1"></div>
   <div id="inner-box-2"></div>
</div>

CSS

#outer-box{
  width:50%;
  background:#fcc;
  position: relative;
  overflow: auto;
}
#inner-box-1{
  height:50px;
  width:50px;
  background:#ccc;
  float:left;
}
#inner-box-2{
  height:50px;
  width:80%;
  background:#555;
  float:left;
}

Answer 1

这是那些简单但完全不直观的奇怪答案之一。您需要结合使用overflow 属性和float 属性来触发块格式化上下文。

请参阅此jsFiddle 示例。

#inner-box-2{
   height:50px;
   background:#555;
   overflow:auto;
}

我所做的就是从您的#inner-box-2div 中删除宽度和浮动并添加一个overflow:auto