एक div के ऊपर और नीचे पाठ रैप कैसे करें?

Question

तत्वों के शीर्ष को गठबंधन करते समय मुझे एक div के चारों ओर लपेटने के लिए पाठ प्राप्त करने में कोई समस्या नहीं है, लेकिन मैं यह नहीं समझ सकता कि पाठ ऊपर और नीचे div को कैसे लपेटें।

उदाहरण के लिए मैं चाहता हूं कि पाठ 40px के लिए # कंटेनर की पूरी चौड़ाई हो, फिर दाईं ओर इसे चारों ओर लपेटें, और फिर पूर्ण चौड़ाई पर जाएं।

इसे http://jsfiddle.net/cope360/wZw7T/1/ पर देखें। जहां मैंने शीर्ष-मार्जिन #inset में जोड़ा है, जहां मैं टेक्स्ट को लपेटना चाहता हूं। क्या यह संभव है?

सीएसएस:

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    float: left; 
    margin-top: 40px; 
} 

HTML:

<div id="container"> 
     <div id="inset">Inset</div> 
     This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. 
</div> 

Answer 1

यहां एक समाधान है जो प्रतिपादन देता है जो मैं moontear के उत्तर और http://www.csstextwrap.com/ पर आधारित चाहता हूं।

सीएसएस:

div { 
    float: left; 
    clear: left; 
} 

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    margin: 10px 10px 10px 0px; 
} 

#spacer { 
    width: 0px; 
    height: 40px; 
} 

HTML:

<div id="container"> 
    <div id="spacer"></div> 

    <div id="inset">Inset</div> 
    This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. 
</div> 

http://jsfiddle.net/cope360/KbFGv/1/

Answer 2

दुर्भाग्य से आप पाठ दोनों के ऊपर और नीचे लपेट नहीं हो सकता है अपने वर्तमान एचटीएमएल का एक सीमाओं। आपको कई divs का उपयोग करना होगा और इसे लपेटने के लिए सामग्री को काटना होगा।

आप केवल यह 1 पक्ष

Answer 3

आसान बात नहीं, कठिन समाधान के लिए लपेट कर सकते हैं। आप केवल एक div का उपयोग करके एक तरफ पाठ को लपेटने में सक्षम होंगे, हालांकि आप कई DIV एस का उपयोग करके टेक्स्ट को लपेट सकते हैं।

एक समाधान शब्दों से बेहतर है: http://www.csstextwrap.com/ इसे एक शॉट दें और आप देखेंगे कि "कई divs" के साथ मेरा क्या मतलब है।

Answer 4

शायद आदर्श समाधान नहीं है, लेकिन यदि आप शीर्ष पर की बजाय अपने टेक्स्ट के बीच में "इन्सेट" div डालते हैं, और शीर्ष मार्जिन से छुटकारा पाएं, जैसे आप इसे चाहते हैं। मुझे लगता है कि यह एक झुकाव है। example

Answer 5

पर यह देखें मैं एक ही मुद्दा था, और मैं cope360 के जवाब के आधार पर बना कुछ है कि शामिल नहीं करता है करने के लिए अतिरिक्त मार्कअप जोड़ना यहां एक jsfiddle है जो अनिवार्य रूप से वही काम करता है, लेकिन शुद्ध सीएसएस के साथ।

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    float: left; 
    clear:left; 
} 
#container:before { 
    content: " "; 
    height: 40px; 
    width: 0px; 
    float: left; 
}