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

问题描述：

我想使显示字段div占据整个剩余宽度。现在显示字段宽度等于文本长度。怎么做？设置浮动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>

我想你想要这个http://tinkerbin.com/V7vfbkY8 –

如果标签div的内容宽于160像素，这将不起作用。 –

答

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

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

.display-field { 
    background:red 
}

DEMO

如果标签的宽度不同，则在将字段应用相同的填充时会遇到一些麻烦。 – Amberlamps

这是一个可视化的解决方案，'.display-field'实际上在'.display-label'后面。 – xiaoyi

答

overflow:hidden;这里是你的朋友。

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

jsfiddle example here

答

我认为你需要这个。

.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的宽度来占用剩余空间

相关推荐