CSS3自动填充问题？

Question

例如：

<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

我需要#left的宽度是固定的，#right自动填充#container中留下的空格？ 如何用 CSS3 实现这一目标？我正在使用IE9

Answer 1

无需使用CSS3的任何新功能。

实施例

CSS

#container {
  border: 3px solid red;  
}

#left {
  width: 100px;  
  float: left;   
  background: blue;
  color: white;
}

#right {
  background: yellow;   
}

jsFiddle

Answer 2

亚历克斯的例子很好所以我会使用他的代码，但我想也许你正在寻找右边的overflow:hidden它不会在左下方包裹。

查看新 fiddle

#container {
  border: 3px solid red;  
}

#left {
  width: 100px;  
  float: left;   
  background: blue;
  color: white;
}

#right {
  background: yellow;
  overflow: hidden;
}

Answer 3

作为花车的替代品，请尝试使用display: table-cell;（在IE＆lt; 8中不起作用）：

#container {
  border: 3px solid red;  
}
#container > div {
    display: table-cell;
}
#left {
  min-width: 100px;  
  background: blue;
  color: white;
}
#right {
  width: 100%;
  background: yellow;   
}

jsfiddle