सीएसएस

Question

में डीआईवी के बाद लाइन ब्रेक को कैसे हटाएं सीएसएस के साथ एक div के बाद लाइन ब्रेक को रोकने के लिए कोई तरीका है, लेकिन एक div मिनट चौड़ाई और दूसरी अधिकतम चौड़ाई है?

उदाहरण के लिए मैं

<div class="label">My Label:</div> 
<div class="text">My text</div> 

है और यह की तरह प्रदर्शित करना चाहते हैं:

My Label: My text 

कहाँ मेरे पाठ सही तैरता है, और मेरे लेबल सभी शेष चौड़ाई लेता है?

मैं निम्नलिखित सीएसएस का उपयोग कर रहा है, लेकिन .text div रैपिंग रखता है:

div 
{ 
    display: inline-block; 
} 

.label { 
    border:1px solid blue; 
    width:100%; 
} 

.text { 
    border:1px solid red; 
float:right; 
} 

** अद्यतन: जे एस बेला *http://jsfiddle.net/jPrMG/

आपकी मदद के लिए धन्यवाद

Answer 1

आप सीएसएस तालिका मॉडल का उपयोग कर सकते हैं:

.label { 
    border:1px solid blue; 
    display: table-cell; 
    width: 100%; 
} 

.text { 
    border:1px solid red; 
    display: table-cell; 
    white-space: nowrap; 
} 

Fiddle

Answer 2

यह नहीं है एक 'लाइन ब्रेक' जिसे आप देख रहे हैं; ऐसा इसलिए है क्योंकि <div> तत्व block तत्व होने के लिए डिफ़ॉल्ट हैं। अभी भी

display:inline; 

या

display:inline-block; 

आप हैं:

आप व्यवहार बदलने के लिए इतना है कि वे एक ही लाइन पर दिखाई देते हैं चाहते हैं, आप display संपत्ति सीएसएस में बदल सकते हैं, तो जैसे width या min-width संपत्ति (जैसा कि प्रश्न में बताया गया है) चाहते हैं तो आपको उन दो, inline-block के बाद की आवश्यकता होगी।

उम्मीद है कि मदद करता है।