सूची तत्वों के अंदर फ़्लोटिंग तत्वों के लिए चाल

Question

मैं आदेशित सूचियों (ol) का उपयोग कर एक निर्देश सूची बनाने की कोशिश कर रहा हूं। अंदर मैं निर्देश के लिए पाठ को बाईं ओर तैरना चाहता हूं और छवि को चरणबद्ध फ्लोट दिखा रहा है।

मैं तो जैसे सूची आइटम (ली) के अंदर सामग्री लपेटकर की कोशिश की है:

<ol> 
     <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li> 
    </ol> 

कि सिर्फ li तत्व बाहर छवि भेजता है। मैंने ली के अंदर दो फ्लोट किए गए तत्वों के बाद एक समाशोधन div जोड़ने का प्रयास किया है, मैंने ली तत्व को स्पष्ट हैक जोड़ने का प्रयास किया है। मैंने फ्लोटेड divs के अंदर पी और img तत्वों घोंसले की कोशिश की है।

क्या यह भी संभव है? इस तरह से उपयोग करना चाहते हैं, लेकिन यदि नहीं तो कुछ अन्य समाधान उत्पन्न करेंगे।

Answer 1

एक गैर-फ़्लोटेड कंटेनर अपनी सामग्री को होने और चौड़ाई या ऊंचाई के रूप में नहीं पहचान पाएगा, जिससे कंटेनर किसी अन्य सीएसएस नियमों को दी गई न्यूनतम अनुमत ऊंचाई पर गिरने का कारण बनता है।

अनुच्छेद और छवि को सूची सूची तत्व द्वारा बाधित करने के लिए, आपको सूची तत्व और अभिभावक आदेशित सूची दोनों को फ़्लोट करने की आवश्यकता होगी।

दोनों आदेशित सूची और सूची तत्व दोनों सामग्री को प्रस्तुत करने के लिए आवश्यक न्यूनतम चौड़ाई को कम कर देंगे। इसका परिणाम अत्यधिक पतली सूची में हो सकता है। आदेशित सूची में उपयुक्त चौड़ाई लागू करें और इसे प्रबंधित करने के लिए सूची आइटम लागू करें।

डीओएम में आदेशित सूची के नीचे तुरंत किसी तत्व को साफ़ करने पर विचार करें ताकि यह सुनिश्चित किया जा सके कि वे सूची के बाएं या दाएं भाग में नहीं आते हैं।

Answer 2

<ol> 
    <li> 
    <div> 
     <p style="float:left">Follow these instructions</p> 
     <img style="float:right" src="[***]" alt="" /> 
    </div> 
    </li> 
</ol> 

इसे आज़माएं, इससे मेरी मदद हुई।

Answer 3

आप overflow: hiddentechnique का उपयोग करने पर भी विचार कर सकते हैं; overflow: hidden को आपके li में जोड़ने से यह फ़्लोट की गई सामग्री को शामिल करने में सक्षम हो जाएगा।

jsFiddle here।