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

Question

我有两个<div/>s 以“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;
}

见演示。

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/