Question

我有一个不同的宽度div。里面是另外两个，一个是固定宽度，另一个应该填充该区域的其余部分。但我不能总是填补它。根据外盒的宽度，它要么太小，要么太大并且落在内盒1的下方。如何让内盒2填充外盒的其余部分？

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属性结合使用来触发block formatting context。

请参阅 jsFiddle example 。

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

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

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

1 个答案: