इसके अंदर पाठ के अनुसार div चौड़ाई कैसे बढ़ाएं?

Question

मेरे पास एक div है जिसमें उपयोगकर्ता इनपुट टेक्स्ट है। लेकिन मैं स्क्रीन के अधिकतम 50% तक, इसकी पाठ के अनुसार इसकी चौड़ाई को बढ़ाना चाहता हूं। मेरे सीएसएस कोड:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

परिणाम:

:

वहाँ "555" संदेश के बाद अंतरिक्ष के एक बहुत कुछ है, मैं इस आकार उपयोगकर्ता की तरह कुछ पाठ आदानों ही अगर चाहते हैं

तो, टेक्स्ट आकार के आधार पर, मैं div की चौड़ाई को द्विपक्षीय रूप से कैसे बढ़ा सकता हूं?

Answer 1

इसे प्राप्त करने के कई तरीके हैं, लेकिन आईएमएचओ सबसे साफ है। आपकी समस्या यह है कि बक्से "लालची" हैं और उपलब्ध चौड़ाई में विस्तार करने की कोशिश करेंगे।

इसे रोकने के लिए, आप कर सकते हैं: ": छोड़ दिया नाव,"

• यह सुनिश्चित
• लेकिन "साफ़: बाएं;" दाईं ओर उपलब्ध स्थान का उपयोग करने के लिए अतिरिक्त "बाएं फ़्लोटिंग" तत्वों को रोकने के लिए।

सीएसएस हो जाता है:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
    float: left; 
    clear: left; 
} 

मैं यहाँ Liveweave पर पूर्ण कोड और अतिरिक्त स्पष्टीकरण (माउसओवर पर) प्रदान की: http://liveweave.com/DFCZFj

Answer 2

display को table पर div का प्रकार बदलने का प्रयास करें।

Example Here

.messages { 
    display: table; 
    max-width: 50%; 
    min-width: 150px; 
    /* other declarations omitted due to brevity */ 
} 

Answer 3

बस display:inline; जोड़ें। आप न्यूनतम चौड़ाई संपत्ति को भी हटा सकते हैं, अन्यथा यदि पाठ छोटा है, तो आपके पास अभी भी वह अंतर होगा।

Answer 4

ब्लॉक तत्वों (div के डिफ़ॉल्ट प्रदर्शन प्रकार) कंटेनर की अधिकतम क्षैतिज जगह लेने का प्रयास करेगा। जब भी आप उन्हें देखते हैं तो एक अंतर्निहित width:100% कल्पना करें। inline-block ब्लॉक स्तर तत्व बनाएगा जिसमें अगला तत्व क्षैतिज रूप से आसन्न प्रस्तुत करने का प्रयास करेगा (बशर्ते पर्याप्त कमरा हो)। । यह वही है आप display: table उपयोग करने के लिए (और साथ ही इस समाधान में काम करेंगे चाहते है, लेकिन यह अपने आप ही नीय है मैं उनसे बचने

तो अपने समाधान तीन भागों की आवश्यकता है:।

सबसे पहले, आपको लगता है कि निर्दिष्ट करने की आवश्यकता पंक्तियों उपलब्ध क्षेत्र के 50% से भी बड़ा हो जाएगा आप एक बाहरी फ्रेम के साथ ऐसा कर देगा:।।

.frame { 
    max-width:50%; 
} 

इसके बाद, संदेशों खुद को प्रत्येक एक समय में अंतरिक्ष पूरी पंक्ति (रों) दी जानी चाहिए तो हम प्रत्येक संदेश के आस-पास एक अवांछित div टैग का उपयोग करेंगे।

अंत में, आप अपने भीतर के messages तत्वों के लिए display: inline-block का उपयोग करेंगे। चूंकि वे अपने मूल टैग का एकमात्र बच्चा हैं, इसलिए आपको एक-दूसरे पर घूमने वाले तत्वों के बारे में चिंता करने की आवश्यकता नहीं होगी। इनलाइन-ब्लॉक का उपयोग करके, चौड़ाई का सम्मान किया जाता है और यह हमें पृष्ठभूमि रंग को लागू करने के लिए एक महान जगह देता है।

.messages { 
    display: inline-block; 
    min-width: 150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

बस एक संदर्भ के रूप में, एक अपने मार्कअप निम्नलिखित की तरह दिखाई देगा उम्मीद करेंगे:

<div class="frame"> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 
    </div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra 
    text 
    </div></div> 
</div> 

मुझे लगता है कि आप इस आप इच्छित प्रभाव देता मिल जाएगा। वैसे, यह एक सामान्य समाधान है - लेकिन यदि आप min-width चुनते हैं जो 50% से बड़ा है, तो आप सुनिश्चित करेंगे कि inline-block के दो भाई बहन एक पंक्ति के लिए बहुत व्यापक होंगे। यदि आप ऐसा करते हैं, तो आप मार्कअप में अतिरिक्त div के साथ बांट सकते हैं।