अस्वीकरण
फ़्लोट किए गए तत्वों के बगल में सूचियाँ समस्याओं का कारण बनती हैं। मेरी राय में, इन प्रकार के फ़्लोटिंग मुद्दों को रोकने का सबसे अच्छा तरीका है कि फ़्लोटिंग छवियों से बचें जो सामग्री के साथ प्रतिच्छेद करते हैं। यह तब भी मदद करेगा जब आपको उत्तरदायी डिज़ाइन का समर्थन करना होगा।
पैराग्राफ के बीच केंद्रित छवियां होने का एक सरल डिजाइन बहुत आकर्षक लगेगा और बहुत अधिक फैंसी होने की तुलना में समर्थन करने के लिए बहुत आसान होगा। यह भी एक कदम दूर है <figure>।
लेकिन मैं वास्तव में मंगाई गई छवियां चाहता हूं!
ठीक है, इसलिए यदि आप इस मार्ग को जारी रखने के लिए पर्याप्त रूप से पागल हैं, तो कुछ तकनीकें हैं जिनका उपयोग किया जा सकता है।
सबसे सरल यह है कि सूची का उपयोग करें overflow: hiddenया overflow: scrollताकि सूची अनिवार्य रूप से लिपटे हुए है जो गद्दी को वापस खींचती है जहां यह उपयोगी है:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
इस तकनीक में कुछ समस्याएं हैं। यदि सूची लंबी हो जाती है, तो यह वास्तव में छवि के चारों ओर नहीं लपेटता है, जो floatछवि पर उपयोग करने के पूरे उद्देश्य को हरा देता है ।
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
लेकिन मैं वास्तव में सूची लपेटना चाहता हूँ!
ठीक है, इसलिए यदि आप भी कर रहे हैं उन्मादपूर्ण अधिक लगातार और आप पूरी तरह से करना चाहिए इस मार्ग नीचे जारी रखने के लिए, वहाँ एक और तकनीक है कि सूची आइटम लपेटो और गोलियों बनाए रखने के लिए इस्तेमाल किया जा सकता है।
पैडिंग के बजाय <ul>और इसे गोलियों के साथ अच्छी तरह से व्यवहार करने के लिए प्राप्त करने की कोशिश करें (जो ऐसा कभी नहीं करना चाहता था), उन गोलियों को दूर ले जाएं <ul>और उन्हें <li>एस को दें। बुलेट खतरनाक हैं, और <ul>उन्हें ठीक से संभालने के लिए बस जिम्मेदार नहीं है।
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
यह रैपिंग व्यवहार जटिल सामग्री के लिए अजीब चीजें कर सकता है, इसलिए मैं इसे डिफ़ॉल्ट रूप से जोड़ने की अनुशंसा नहीं करता हूं। यह बहुत आसान है इसे कुछ के रूप में सेट किया जा सकता है जिसे किसी ऐसी चीज के बजाय चुना जा सकता है जिसे ओवरराइड करना पड़ता है।
