मैं नीचे-दाएं div के चारों ओर पाठ कैसे लपेट सकता हूं?

Question

हर बार जब मैं सीएसएस में कुछ सरल-सरल करने की कोशिश करता हूं, तो यह काम नहीं करता है।

मेरे पास एक सामग्री div है जिसमें 460x160 छवि है। मैं बस इतना करना चाहता हूं कि छवि को नीचे-दाएं कोने में स्थित करें और इसके चारों ओर अपना टेक्स्ट लपेटें।

------------------ 
| text text text | 
| text text text | 
| text text -----| 
| text text | | 
------------------ 

एक शीर्ष बाएँ या ऊपरी-दाएं छवि के साथ करने से केक है:

#contents img { float:right; } 

------------------ 
| text text | | 
| text text -----| 
| text text text | 
| text text text | 
------------------ 

अब कैसे मुझे लगता है कि धक्का है

<div id="contents"> 
    <img src="..." /> 
    text text text text text text ... 
</div> 

तो मैं जैसे कि यह देखने के लिए चाहते हैं नीचे तक? सबसे अच्छा मैं अब तक लेकर आए हैं कर रहे हैं:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px 

------------------ 
| text text  | 
| text text  | 
| text text -----| 
| text text | | 
------------------ 

इस मामले पाठ मार्जिन में मुद्रित नहीं करता है, तो छवि के ऊपर सफेद स्थान है।

#contents { position:relative; } 
#contents img { position:absolute; right:0; bottom:0; } 

-or- 

// move the img tag under the text in the html and: 
#contents img { float:right; margin-top:-160; } 

------------------ 
| text text text | 
| text text text | 
| text text -----| 
| text text | te | 
------------------ 

इस मामले में टेक्स्ट छवि के ऊपर या नीचे प्रिंट करता है।

तो ... मैं इसे कैसे पूरा कर सकता हूं?

Answer 1

यह सुनिश्चित before (2003) कहा गया है लगता है, और before (2002), या before (2005)

पिछले लिंक वास्तव में कोई javascript-based solution सुझाव देते हैं, लेकिन एक निश्चित (जैसे गैर द्रव) समाधान के लिए।

हालांकि यह अनुरूप है, other advices found

ऐसा करने के लिए एक ही रास्ता के साथ पाठ के बीच में कहीं जारी तत्व डाल करने के लिए है। इसे हर समय सही करना असंभव है।

या this one:

यह एक ऊर्ध्वाधर "pusher" तत्व चल के होते हैं (जैसे img के रूप में, लेकिन यह सिर्फ एक खाली div उपयोग करने के लिए शायद होशियार है), तो यह नीचे चल वांछित वस्तु, स्पष्ट संपत्ति का उपयोग कर। इस विधि के साथ बड़ी समस्या यह है कि आपको अभी भी पता होना है कि टेक्स्ट की कितनी पंक्तियां हैं। यह चीजों को बहुत आसान बनाता है, और निश्चित रूप से जावास्क्रिप्ट के साथ कोड किया जा सकता है, बस "पुशर" की ऊंचाई को कंटेनर की ऊंचाई तक फ्लोट की ऊंचाई से कम करने की आवश्यकता है (माना जाता है कि आपका कंटेनर निश्चित/न्यूनतम ऊंचाई नहीं है) ।

वैसे भी, discussed in this thread के रूप में, कोई आसान समाधान नहीं है ...

---

Cletus टिप्पणियाँ इस thread from 2003 है, जो एक बार फिर से इस तथ्य यह आसानी से प्राप्त नहीं किया जा सकता है कहा गया है में उल्लेख है।
हालांकि, यह Eric Meyer's article का संदर्भ देता है, जो उस प्रभाव के करीब आता है जो आप प्राप्त करना चाहते हैं।

कैसे समझ तैरता और सामान्य प्रवाह एक दूसरे से संबंधित है, और कैसे समझ समाशोधन तैरता के आसपास सामान्य प्रवाह में हेरफेर करने के लिए इस्तेमाल किया जा सकता है, लेखकों एक बहुत शक्तिशाली लेआउट उपकरण के रूप में तैरता को रोजगार कर सकते हैं।
क्योंकि फ्लोट का मूल रूप से लेआउट के लिए उपयोग नहीं किया गया था, इसलिए कुछ हैक उन्हें इरादे के रूप में व्यवहार करने के लिए आवश्यक हो सकते हैं। इसमें फ़्लोटिंग तत्व शामिल हो सकते हैं जिनमें फ्लोट, "समाशोधन" तत्व, या दोनों का संयोजन शामिल हो।

Answer 2

मुझे मिला समाधान में शामिल है कि आपके पास एक div है जिसकी चौड़ाई बदलती नहीं है, न ही पाठ की मात्रा करता है। फिर आप पाठ के अंदर छवि को स्थिति में रख सकते हैं और इसे संरेखित कर सकते हैं = दाएं। तो यदि आपके पास इसके चारों ओर सही मात्रा में पाठ है, तो आप दाईं ओर और div के नीचे छवि प्राप्त करते हैं।

<style > 
#contents{ 
    border: 2px solid red; 
    background: #ddd; 
    position: absolute; 
    width:600px; 
} 



</style> 
<div id="contents"> 
    text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ...  
    text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ...  
    text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ...  
    text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/> 
    text text text text text text ... text text text text text text ... text text text text text text ...  
    text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... 
    text text text text text text ... text text text text text text ... text text text text text text ... 
    hey hey text text text text text text ... text text text text text text ... text text text text text text ...  
    text text text text text text ... text text text text text text ... 
</div> 

Answer 3

ठीक है। तो मुझे वास्तव में यही समस्या है और कुछ बिंदु पर जवाब ने मुझे शनिवार की रात पनीर केक की तरह मारा। जब आप Word में टेक्स्ट रैपिंग सेट करने का प्रयास करते हैं तो यह लगभग एक ही हिट और मिस प्रभाव होता है।

img.right { 
    float: right; 
} 

अब तुम सब करने की है बस इसे पाठ जहां लाइनों को तोड़ने के लिए चाहते हैं अंदर स्थापित किया जाएगा। पाठ पाठ के अंत करने के लिए तैरने लगते हैं तो वह हमेशा के लिए पाठ धक्का होगा छोड़ दिया है, लेकिन यदि आप पाठ की तरह के बीच में छवि ...

<p>This is some text <img src="example.jpg" class="right" /> and then add 
some more text.</p> 

डाल शीर्ष भाग रहता है कि वह कहाँ है और पाठ छवि के ऊपर तैरने के लिए स्वतंत्र है और शेष छवि के बाईं ओर धक्का दिया जाता है। यह एक कामकाज है लेकिन जेएस का उपयोग करने के रूप में लगभग उतना ही कठिन नहीं है और यदि आप WYSIWYG संपादक का उपयोग करते हैं तो यह और भी आसान है। इसके बारे में सोचने के लिए आओ अगर आप WYSIWYG संपादक का उपयोग करते हैं तो इसमें यह सुविधा स्वचालित रूप से होती है। पी समस्या हल हो गई।

चीयर्स।

Answer 4

अच्छा ... यह एक बहुत पुरानी पोस्ट है लेकिन मैं संघर्ष कर रहा हूं और एक छोटे से कामकाज के साथ इसे दूर कर गया। मुझे दाईं ओर एक गठबंधन की छवि और शीर्ष से बिल्कुल 170px की आवश्यकता थी। और छवि के शीर्ष, बाएं और नीचे प्रवाह पर पाठ की आवश्यकता है। तो मैंने जो किया वह 0px चौड़ाई है, 170px ऊंचाई और फ्लोट दाएं के साथ। तब आईएमजी फ्लोट करेगा और सही और वॉयला साफ़ करेगा!

<!-- I used CSS, but inline will serve well here --> 
 
<div style="float: right; width: 0px; height: 170px"></div> 
 
<div style="float: right; clear: right"><img src="..." /></div> 
 
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
text text text text text text

बहुत अच्छी तरह से काम किया :), ऊंचाई लेने के द्वारा

Answer 5

आगे का हल पोस्ट, मैं एक त्वरित JQuery का उपयोग किया है हैक गतिशील पुशर की ऊंचाई को समायोजित करने के लिए उस क्षेत्र का जहां मैं सामग्री क्षेत्र की ऊंचाई से नीचे दाएं-दाएं संरेखित करना चाहता था, और इसे पुशर div पर लागू कर रहा था, जैसा कि:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px') 

इसे कुछ मामूली बदलावों की आवश्यकता है, लेकिन आम तौर पर आप काम करने जा रहे हैं!

Answer 6

मुझे मिला सबसे सरल समाधान एक div तत्व के अंदर img लपेटना है और फिर इसे संरेखित करने के लिए पैडिंग-टॉप और मार्जिन-नीचे मानों का उपयोग करना है।

यह मेरा सीएसएस

.contentDiv .bottomRight img{ 
    height: 130px; 
    float:right; 
    padding-top: 60px; 
    margin-bottom: -10px; 
    } 

है और यहाँ

<div class="contentDiv"> 
<h1>If you are seeing this and reading it, then all is working well.</h1> 
<div class="bottomRight"> 
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="> 
</div> 
</div> 

कारण गद्दी और मार्जिन मेरे लिए काम किया क्योंकि मैं उसे अपने जनक तत्व के अंदर का उपयोग करें "contentDiv" स्वतः समायोजन है HTML है सामग्री के अनुसार div की ऊंचाई। सुनिश्चित नहीं है कि इसका कोई उपयोग है या नहीं।

Answer 7

एक jQuery समाधान के लिए, lowFloat प्लगइन gilly3 द्वारा बनाई कोशिश: https://github.com/gilly3/lowFloat