根据兄弟宽度确定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.