सीएसएस पैरेंट तत्व चौड़ाई

Question

निर्धारित करने के लिए बच्चे तत्व के भीतर पाठ को अनदेखा करता है, किसी भी तत्व की चौड़ाई को ठीक किए बिना, मैं पैरेंट div तत्व को चौड़ाई निर्धारित करते समय टेक्स्ट को अनदेखा करना चाहता हूं। मैं चाहता हूं कि तत्व की चौड़ाई केवल छवि की चौड़ाई से प्रभावित हो।

<div> 
    <img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/> 
    <p>I want this text to wrap once this paragraph element reaches the width of the image.</p> 
</div> 

div { 
    background: green; 
    display: inline-block; 
} 

my jsFiddle

किसी भी सलाह बहुत table-caption
(फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया गया)

अपडेट किया गया करने के लिए

Answer 1

div के प्रदर्शन बदलें संपत्ति की सराहना की jsfiddle

Answer 2

इसका मतलब यह होगा आपको डोम टी को स्थानांतरित करना होगा री, जैसा कि आप छवि को इसकी मूल चौड़ाई निर्धारित करना चाहते हैं। डोम पेड़ को ऊपर ले जाना दुर्भाग्य से संभव नहीं है (अभी तक)।

एक विकल्प के रूप में, आप टेक्स्ट प्रवाह से बाहर उठाने के लिए टेक्स्ट पूर्ण स्थिति को स्थान दे सकते हैं, और इसलिए इसके मूल div की चौड़ाई को प्रभावित नहीं करते हैं। हालांकि इसका मतलब यह भी होगा कि ऊंचाई प्रभावित नहीं होती है, जो शायद आपके बाद के बाद नहीं है। आप मूल पृष्ठभूमि को दोहरा कर सही ऊंचाई की नकल कर सकते हैं, लेकिन नीचे सामग्री को धक्का नहीं देगी, इसलिए यह वास्तव में मुझे लगता है कि एक विकल्प भी नहीं है। मैंने वैसे भी एक उदाहरण स्थापित किया: http://jsfiddle.net/y8Qnd/2/

एकमात्र विकल्प जिसे मैं सोच सकता हूं वह जावास्क्रिप्ट है। छवि की चौड़ाई प्राप्त करें और इसे मूल कंटेनर पर लागू करें। jQuery में (मैं शायद इस तरह के एक तुच्छ बात के लिए jQuery का उपयोग कर के लिए कोसते हो जाएगा, लेकिन मैं कर रहा हूँ बस 'जावास्क्रिप्ट पुराने स्कूल' अब और लिखने के लिए इस्तेमाल नहीं किया ...) यह कुछ इस तरह दिखेगा:

var $wrapper = $('div'); // you will probabaly want to use some id or class here 
var width = $wrapper.find('img').width(); 
$wrapper.css('width', width); 

और एक उदाहरण: http://jsfiddle.net/y8Qnd/6/

Answer 3

यहाँ सबसे अच्छा है कि मैं मिल गया है:

http://jsfiddle.net/y8Qnd/3/

मैंने क्या किया गया है position: absolute ताकि containi के साथ प्रवाह से बाहर p टैग लेने के लिए है एनजी div में सिर्फ छवि की चौड़ाई है। फिर, p टैग अपने माता-पिता, कंटेनर की चौड़ाई का उत्तराधिकारी है। यह p टैग की चौड़ाई को ठीक नहीं करता है, और पूरी तरह से ब्राउज़र पार हो गया है।