html - 设置 float div的宽度以占用剩余空间

Question

我想让显示字段 div 占据整个剩余宽度。现在显示字段宽度等于文本长度。如何做到这一点？

.display-label {
        float:left;
        clear:left;
        min-width:160px;
}

.display-field {
        float:left;
        clear:right;
}

<div class="display-label">Account Id</div>
<div class="display-field">30221</div>
<div class="display-label">Full Name</div>
<div class="display-field">Tomas</div>

Answer 1

从 .display-field 中移除 float 和清除。现在 .display-field div 从浏览器的左侧开始，因此您需要将所需的颜色添加到 div 以操纵输出。

.display-label {
        float:left;
        clear:left;
        min-width:160px; 
        background:white
}

.display-field {
    background:red
}​

DEMO