如何创建一个div 100% - px

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

Working jsFiddle Demo

考虑以下标记:

<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;
}