css - 你如何制作一个 100% 的 div - 一些像素？

Question

我有两个div。我希望左边的那个是 200px。我希望右边的那个填满屏幕宽度 - 200px。换句话说，右边的 div 在左边的 div 被绘制之后应该是 100% 的可用空间。有没有一种纯粹的CSS方式来做到这一点？

粗略的例子

<div class='l'></div><div class='r'></div>
.l {
    display:inline-block;
    background:green;
    width:100px;
    height:20px;
}

.r {
    background:red;
    height:20px;
}

Answer 1

工作 jsFiddle 演示

考虑以下标记：

<div id="fixed">Fixed Width</div>
<div id="flexible">Flexible Width</div>

在你的 CSS 中：

#fixed {
    background: red;
    float: left;
    width: 200px;
}

#flexible {
    margin-left: 200px;
    background: green;
}