浮動小数点の幅を残りのスペースを占めるように設定してください

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を調整します。

ご希望の場合はお手伝いします。ありがとう!!