html - 设置浮动 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。现在 .display-field div 从浏览器的左侧开始，因此您需要将所需的颜色添加到 div 以操作输出。

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

.display-field {
    background:red
}​

演示

Answer 2

overflow:hidden;是你的朋友吗？

   .display-label {
        float:left;         
        clear:left;         
        min-width:160px;
    }  
    .display-field {        
        overflow:hidden;
        background:#ccc;    
    }

jsfiddle 示例在这里

Answer 3

我想你需要这个。

.display-label {
        float:left;
        clear:left;
        min-width:30%;
        background: red;
}

.display-field {
        float:left;
        clear:right;
        background: yellow;
        min-width:70%;
}

看现场演示

min-width根据您的需要进行调整。

希望它会帮助你。谢谢 ！！