CSS से रिस्पॉन्सिव फ्लोटिंग एलिमेंट्स बनाने के लिए, कोड निम्नानुसार है -
उदाहरण
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .floatRight, .floatLeft { color: white; font-size: 20px; padding: 10px; font-weight: 500; } .floatRight { background-color: rgb(0, 2, 95); float: right; } .floatLeft { background-color: rgb(85, 0, 74); float: left; } @media (max-width: 768px) { .floatRight { float: left; } .floatLeft { float: right; } } </style> </head> <body> <h1>Responsive Float Example</h1> <h2>The floats will swap their position on smaller screens</h2> <div class="clearfix"> <div class="floatRight">Float Right ></div> <div class="floatLeft">Float Left <</div> <br /> </div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
स्क्रीन रिसाइज़ करने पर फ्लोट्स अपनी पोजीशन स्वैप करेंगे -
