Legen Sie eine schwebende div's Breite fest, um den verbleibenden Platz zu belegen

Question

Ich möchte Display-Divs machen, um die gesamte verbleibende Breite aufzunehmen. Jetzt entspricht die Anzeigefeldbreite der Textlänge. Wie geht das?

.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

Remove Schwimmer und klar von .display-field. Jetzt startet das .display-Feld div von der linken Seite des Browsers, also müssen Sie den divs die gewünschten Farben hinzufügen, um die Ausgabe zu manipulieren.

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

.display-field { 
    background:red 
}​ 

DEMO

Answer 2

overflow:hidden; ist hier dein Freund.

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

jsfiddle example here

Answer 3

Ich glaube, Sie diese brauchen.

.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

einstellen min-width nach Ihrem Bedarf.

Ich hoffe, es wird dir helfen. Vielen Dank !!