हम HTML में एलिमेंट्स को CSS फ्लोट प्रॉपर्टी का उपयोग करके अलाइन कर सकते हैं जिसका उपयोग बॉक्स या कंटेंट की पोजिशनिंग या फॉर्मेटिंग के लिए किया जाता है। डेवलपर CSS फ्लोट के साथ एलिमेंट को लेफ्ट या राइट की ओर पोजिशन कर सकता है।
उदाहरण
आइए एलिमेंट्स को अलाइन करने के लिए CSS फ्लोट प्रॉपर्टी का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>Alignment using CSS Float</title> <style> .screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .backSeats div{ margin: 10px; padding: 10px; color: white; border: 4px solid #000; } .backSeats div { background-color: #4CAF50; } .leftFloat{ float: left; } .rightFloat{ float: right; } </style></head> <body> <div class="screen">Screen</div> <div class="backSeats"> <div class="leftFloat">Premium Left Seat 1</div> <div class="leftFloat">Premium Left Seat 2</div> <div class="rightFloat">Premium Right Seat 1</div> </div> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
एक और उदाहरण
आइए एलिमेंट्स को अलाइन करने के लिए CSS फ्लोट प्रॉपर्टी का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title> Alignment using CSS Float</title> <style type="text/css"> p { float: left; margin: 10px; padding: 10px; color:white; background-color: #48C9B0; border: 4px solid #145A32; } p.noneFloat{ float: none; clear: both; color: #34495E; } </style></head> <body> <p>I love Java.</p> <p class="noneFloat">I think C# is better.</p> <p>Even C isn't a bad choice.</p> <p>I agree!</p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
