Ustaw szerokość pływającego elementu div, aby uzyskać pozostałą przestrzeń.

Question

Chciałbym, aby divy w polu graficznym zajęły całą pozostałą szerokość. Teraz szerokość pola wyświetlania jest równa długości tekstu. Jak to zrobić?

.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

Wyjąć pływak i wynika z .display-field. Teraz div pola .display zaczyna się od lewej strony przeglądarki, więc musisz dodać żądane kolory do elementów div, aby manipulować danymi wyjściowymi.

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

.display-field { 
    background:red 
}​ 

DEMO

Answer 2

overflow:hidden; jest Twój przyjaciel tutaj.

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

jsfiddle example here

Answer 3

myślę, że trzeba to.

.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

Regulacja min-width jak na swoje potrzeby.

Mam nadzieję, że ci to pomoże. Dzięki !!