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
}

DEMO

Answer 2

overflow:hidden;是你的朋友。

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

jsfiddle example here

Answer 3

我认为你需要这个。

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

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

see live demo

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

希望它会对你有所帮助。谢谢!!

设置浮动div的宽度以占用剩余空间

3 个答案: