根据兄弟宽度确定div的宽度

Question

我有两个<div/>以“A列”和“B列”的方式排列。 B列是设定宽度，我希望A列占用剩余空间。有没有办法在CSS中实现这一点？或者可能是我正在做的更好的替代方案？

这是结构：

<div>
  <div id='colA'>style is float right</div>
  <div id='colB'>this has a set width of 50px</div>
<div>

Answer 1

使用display: table-cell。

#container{
    display: table;
    width: 100%;
}

#colA {
    display: table-cell;
}

#colB {
    display: table-cell;
    width: 50px;
}

请参阅DEMO。

Answer 2

在其中一个上使用float并向另一个添加边距，该边距等于该方向浮动的宽度。

<div>
  <div id='colA'>this has a set width of 50px and is floated</div>
  <div id='colB'>style has margin equal to floated width</div>
</div>

和

#colA {
    width:50px;
    float:left;
    background-color:red;
}
#colB {
    margnin-left:50px;
    background-color:green;
}

演示 http://jsfiddle.net/C3caq/1/