सीएसएस ऑटो समायोजन पूर्ण चौड़ाई की समस्या नहीं

Question

मैं ऐसा करना चाहता हूं कि बबल का आकार, टेक्स्ट (टिप्पणी) के बाद स्वत: समायोजन कर रहा है जो div के अंदर है .. सबसे पहले कोड को मानता है: .bubble { फ़ॉन्ट आकार: 12 पीएक्स; मार्जिन-तल: 0 पीएक्स; }

.bubble blockquote { 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #c9c2c1; 
    background-color: #000; 
} 
.bubble blockquote p { 
    display: inline; 
    margin: 0px; 
    padding: 0px; 
     font-size: 18px; 
} 

.bubble cite { 
    position: absolute; 
    margin: 0px; 
    padding: 7px 0px 0px 15px; 
    top: 5px; 
    background: transparent url(b/tip.gif) no-repeat 20px 0; 
    font-style: normal; 
} 

और पेज:

<div class="bubble"> 
<blockquote> 
<p> 
Hello, my name is Azzyh 
</p> 
</blockquote> 
<cite>I wrote this today</cite> 
</div> 

अब जैसा कि मैंने कहा, मैं इसे ऑटो करना चाहते हैं पाठ करने के लिए समायोजित, तो "बुलबुला" के आसपास है "हैलो, मेरा नाम azzyh है" ..

चाहते नहीं हैं कि कैसे यह अब है: http://img341.imageshack.us/img341/8303/exampleu.png जैसा कि आप देख यह सब ब्राउज़र की सही + बाएं अंत करने के लिए बाहर चला जाता है ..

छवि की जांच करें, आपको लाइन ("बॉक्स") दिखाई देगी जहां टेक्स्ट है, टेक्स्ट के लिए बहुत बड़ा है। मैं सीएसएस पाठ के बाद बॉक्स समायोजित करना चाहते हैं .. तो "लाइनों" पाठ के आसपास हो जाता है के लिए खेद है "नमस्ते मेरा नाम है" मेरी अंग्रेजी

इस छवि देखें: http://img17.imageshack.us/img17/6057/exampleph.png "लाल" मैं कैसे करना चाहते हैं यह होना चाहिए ..

मैं यह कैसे कर सकता हूं?

धन्यवाद

Answer 1

div तत्वों ब्लॉक स्तर तत्वों को डिफ़ॉल्ट रूप से, बाईं ओर जहाँ तक खिंचाव और सही रूप में उनके युक्त ब्लॉक की अनुमति देगा रहे हैं।

क्रम में div की चौड़ाई प्राप्त करने के लिए स्वतः समायोजित करके, आप इसे एक इनलाइन तत्व को परिवर्तित करने के लिए, एक ही शैली का उपयोग कर के रूप में आप पर p डाल होगा: display: inline;

नोट इस मई कि एक नई लाइन पर स्वचालित रूप से प्रत्येक div को मजबूर नहीं करने का अनपेक्षित दुष्प्रभाव है। अधिक जानकारी के बिना, हालांकि, मुझे पूरी तरह से यकीन नहीं है कि यह आपके लेआउट में अच्छा या बुरा होगा।

Answer 2

अपने

.bubble blockquote p {} 

में

.bubble blockquote {} 

से अपने सीमा संपत्ति

border: 1px solid #c9c2c1; 

ले जाएँ और उस बॉक्स आप जहां चाहें रखना चाहिए।

Answer 3

ऐसा ही एक समस्या मैं था निम्नलिखित सीएसएस लगाने से हल किया गया था:

display:inline-block; 

मैं एक बटन की तरह लग रहे करने के लिए लेकिन पृष्ठभूमि युक्त DIV की चौड़ाई को भरने के लिए बाहर नहीं निकलना चाहिए एक लिंक करना चाहता था।

आईई 6 और आईई 7 में आंशिक समर्थन सहित लगभग सभी ब्राउज़रों में समर्थित है, लेकिन केवल तत्व जहां डिफ़ॉल्ट रूप से 'इनलाइन' है। क्रॉस-ब्राउज़र समर्थन प्राप्त करने के लिए कुछ alternative properties हैं। Google Code for setInlineBlock पर कुछ भी है, लेकिन मैंने इसे स्वयं नहीं किया है।