css - 两个div，一个固定宽度，另一个，其余

Question

我有两个 div 容器。

虽然一个需要特定的宽度，但我需要对其进行调整，以便另一个 div 占据剩余的空间。我有什么办法可以做到这一点吗？

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Answer 1

参见: http://jsfiddle.net/SpSjL/ (调整浏览器的宽度)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

您也可以使用 display: table 来实现，这通常是更好的方法:How can I put an input element on the same line as its label?