मैं कंटेनर के हिस्से के साथ एक शीर्षलेख कैसे दबा सकता हूं?

Question

मैं कुछ HTML मिल गया है:

<div id="thing"> 
    <div id="contentheader"> 
    <h3>Header</h3> 
    </div> 
    <div id="contentcontainer"> 
    <div id="image"> 
     <img alt="balt" src="imagesrc"> 
    </div> 
    <div id="body"> 
     <p>hegl gegl</p> 
    </div> 
    </div> 
</div> 

मैं h3 छवि के साथ 'contentcontainer' में 'contentheader' में पुश करने के लिए नीचे है, जबकि मुख्य पाठ यह बगल में बैठने के लिए होने की जरूरत है। सब कुछ परिवर्तनीय चौड़ाई छवि को बचाने के लिए है।

शायद एक छवि बेहतर प्रदर्शन करेंगे:

आप देख सकते हैं 'बात' के साथ, ग्रे मेल खाती है, 'contentcontainer' के साथ हरे और 'contentheader' के साथ नीले रंग।

एचटीएमएल संपादित करना एक बड़ी परेशानी होगी। मैं छवि निश्चित चौड़ाई के अलावा कुछ भी नहीं कर सकता। क्या यह सिर्फ सीएसएस के साथ करना संभव है? (यह फ्लोट्स और सामान के साथ ऐसा करने में सक्षम होगा, लेकिन मुझे नहीं पता कि यह करने योग्य है या नहीं)

Answer 1

टिप्पणी अनुभाग में थिडडॉट के उत्तरदाता ने मेरी समस्या हल की।

Answer 2

मुझे नहीं लगता कि आपको सीएसएस के साथ एक सही समाधान मिल जाएगा। आप पोजीशनिंग का उपयोग कर सकते हैं लेकिन यदि आप एक लंबा शीर्षक था जो एक से अधिक पंक्तियों में भाग गया तो आप शायद मुद्दों में भाग लेंगे।

यदि आप जावास्क्रिप्ट का उपयोग करने के लिए खुले हैं तो निम्न गैर-फ्रेमवर्क स्निपेट काम करेगा।

// Add the header inside the container div just before the body 
containerDiv = document.getElementById('contentcontainer'); 
headerDiv = document.getElementById('contentheader'); 
bodyDiv = document.getElementById('body'); 
containerDiv.insertBefore(headerDiv, bodyDiv); 

आप एक लाइनर jQuery या अन्य जावास्क्रिप्ट ढांचे का उपयोग कर एक neater के रूप में इस कोड को पुनः सकता है।

Answer 3

ज़रूर, यहाँ एक अल्पविकसित सेटअप के लिए CSS:

http://jsfiddle.net/Nkapr/

से पूछें कि आप कोई प्रश्न हैं।

Answer 4

समस्या यहाँ HTML संरचना, यह ध्यान में अपने लक्ष्य के साथ वास्तव में लिखा है नहीं किया गया हो (जो एक बहुत बेकार है!)

यदि आप केवल इतना के बाद लाइन में नीचे H3 कंटेनर 'contentheader' धक्का है कर रहे हैं 'कंटेंटकंटनर' के अंदर की बाकी चीजों के साथ आप इसे ऊपर खींचने के लिए 'कंटेंट कंटेनर' पर नकारात्मक शीर्ष मार्जिन सेट कर सकते हैं, और उसके बाद 'कंटेंट कंटेनर' में तत्वों को सकारात्मक शीर्ष मार्जिन जोड़ सकते हैं, जिसे नीचे जाने की आवश्यकता है (इस मामले में ' छवि ') इंप्रेशन देते हुए कि एच 3 अनुभाग वास्तव में शेष सामग्री के साथ बैठता है। यह एक हैक का थोड़ा सा है लेकिन यदि आप HTML को बदल नहीं सकते हैं तो यह चाल हो सकती है।