Đặt chiều rộng div nổi để chiếm không gian còn lại

Question

Tôi muốn tạo các div trường hiển thị để chiếm toàn bộ chiều rộng còn lại. Bây giờ chiều rộng trường hiển thị bằng với độ dài văn bản. Làm thế nào để làm điều đó?

.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 phao và rõ ràng từ .display-field. Bây giờ div div trường hiển thị bắt đầu từ phía bên trái của trình duyệt, do đó bạn cần thêm màu sắc mong muốn vào các div để thao tác đầu ra.

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

.display-field { 
    background:red 
}​ 

DEMO

Answer 2

overflow:hidden; là bạn của bạn ở đây.

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

jsfiddle example here

Answer 3

Tôi nghĩ rằng bạn cần điều này.

.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

Điều chỉnh min-width theo nhu cầu của bạn.

Hy vọng nó sẽ giúp bạn. Cảm ơn !!