मुझे वर्तमान में एक दिलचस्प सीएसएस समस्या का सामना करना पड़ रहा है जिसके लिए मुझे वेब पर कुछ भी नहीं मिला। मुझे पता है कि यह हल करने योग्य होना चाहिए, शायद आप अखरोट को तोड़ते हैं .. (?)सीएसएस - तत्वों की फ़्लोटिंग "रिवर्स" - उन्हें नीचे कैसे रखें?
निम्नलिखित समस्या: मुझे नीचे बाईं ओर स्थित एक छवि के सामने कुछ आइकन प्रदर्शित करने की आवश्यकता है। चूंकि आइकन की संख्या भिन्न हो सकती है, इसलिए आइकन एक दूसरे के बगल में तैरते हैं (अधिकतम तीन पंक्ति - चौड़ाई गुणों द्वारा परिभाषित)।
.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; }
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; }
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; }
आप एक तस्वीर प्राप्त करने के लिए:
<div class="labels">
<ul>
<li><img src="image1.png" /></li>
<li><img src="image1.png" /></li>
<li><img src="image1.png" /></li>
<li><img src="image1.png" /></li>
<li><img src="image1.png" /></li>
</ul>
और संबंधित सीएसएस:
यहाँ मेरी HTML कोड (div आइकन वाले एक छवि पर पूर्ण स्थिति में है) है यह कैसा दिखता है और लक्ष्य क्या है मैंने इसे आपके लिए खरोंच कर दिया है: यहां देखें (मुझे छवियां अपलोड करने की अनुमति नहीं है ..): link text
जैसा कि आप देख सकते हैं कि आइकन बाईं ओर तैरते हैं, लेकिन स्पष्ट रूप से शीर्ष पर शुरू होते हैं। यह अच्छा नहीं है, क्योंकि मैं नीचे बाईं ओर से चलने वाली तरंगों की तरफ बढ़ना चाहता हूं, उल-तत्व की चौड़ाई भरना और अगली पंक्ति पर तैरना जारी रखना चाहता हूं।
कोई विचार यह कैसे हल करें? किसी भी सहायताको बहुत सराहा जाएगा!!
बहुत ही रोचक सवाल। मैं निश्चित रूप से एक सुरुचिपूर्ण समाधान खोजने की प्रक्रिया में हूँ। –