如何使内左div​​占用100％减去“右侧固定宽度div”

Question

我想要正确的div有一个固定的宽度，而左边的div要占用盒子里的其他所有东西。

<div id='outer' style='width:100%'>
 <div id='inner1'></div>
 <div id='inner2'></div>
</div>

Answer 1

可能有更好的方法可以做到这一点，但这可能会实现您想要实现的目标：

#outer {
  background-color: red;
}

.clear {
  clear:both;
}

#inner1 {
  background-color: red;
  margin-right:200px;
  float:left;
}

#inner2 {
  float: right;
  width: 200px;
  margin-left: -200px;
  background-color: blue;
}

结合

<div id='outer' style='width:100%'>
 <div id='inner1'>Foo</div>
 <div id='inner2'>Bar</div>
 <div class='clear'></div>
</div>

所以，虽然这实际上并没有让左边的那个占据剩下的空间，但它不会侵占右栏。

相关的jsFiddle：

• http://www.jsfiddle.net/r7MgY/1105/