如何在响应式设计中使一列缩小而另一列保持固定长度

Question

我正在开发一个有两列并且需要适应响应式设计的网站。这似乎不是一个艰难的场景，但由于某种原因，我无法让 CSS 实现我想要的。

B 列（右）需要保持固定长度 - 180 像素。 A 列（左）需要填充 B 列未占用的所有空间，它们之间有 10 像素的填充。我已经做了一段时间，但没有得到我想要的结果。

当网站达到一定宽度时，B 列低于 A 列，它们的宽度都变为 100%。我有那部分工作。随着站点的缩小，只需要缩小 A 列的帮助。谢谢！

Answer 1

http://jsfiddle.net/A4Psw/

您的 HTML：

<div id="wrap">
    <div id="a"></div>
    <div id="b"></div>
</div>

你的 CSS：

#wrap {
    display: table;
    height: 100px;
    width: 100%;
}

#a, #b {
    border: 1px solid red;
    display: table-cell;
}

#b {
    width: 180px;
}