設置浮動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>

來源

2012-11-30 Tomas

我想你想要這個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

來源

2012-11-30 09:22:54 Sowmya

如果標籤的寬度不同，則在將字段應用相同的填充時會遇到一些麻煩。 – 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

來源

2012-11-30 10:33:07

我認爲你需要這個。

.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根據自己的需要。

希望它能幫助你。謝謝！！

來源

2012-11-30 11:55:39

設置浮動div的寬度來佔用剩餘空間

回答

相關問題