HTML में दो divs को क्षैतिज रूप से अलाइन कैसे करें?

परिचय

HTML में दो divs को क्षैतिज रूप से अलाइन करने के लिए, CSS float प्रॉपर्टी का उपयोग left मान के साथ करें।

उदाहरण: Float का उपयोग करके

<!DOCTYPE html> <html> <head> <style> .demo div { 
    float: left; 
    clear: none; 
} </style> </head> <body> 
<div class="demo"> 
    <div> 
        <span>div1</span> 
        <select size="5"> 
            <option value="c1">India</option> 
            <option value="c2">US</option> 
            <option value="c3">UK</option> 
            <option value="c4">Australia</option> 
        </select> 
    </div> 
    <div> 
        <span>div2</span> 
        <select size="5"> 
            <option value="r1">1</option> 
            <option value="r2">2</option> 
            <option value="r3">3</option> 
            <option value="r4">4</option> 
        </select> 
    </div> 
</div> </body> </html>

आधुनिक और बेहतर तरीके

1. Flexbox (अनुशंसित)

.demo {
    display: flex;
    gap: 20px; /* divs के बीच स्पेस */
}

.demo div {
    flex: 1; /* समान चौड़ाई */
    /* या */
    width: 300px; /* फिक्स्ड चौड़ाई */
}

2. CSS Grid

.demo {
    display: grid;
    grid-template-columns: 1fr 1fr; /* दो समान कॉलम */
    gap: 20px;
}

3. Inline-block (पुराना लेकिन उपयोगी)

.demo {
    font-size: 0; /* व्हाइटस्पेस हटाने के लिए */
}

.demo div {
    display: inline-block;
    width: 48%; /* थोड़ा कम ताकि गैप के लिए जगह रहे */
    vertical-align: top;
    font-size: 16px; /* फॉन्ट साइज़ रीसेट */
}

तुलना तालिका

क्लियरफिक्स (Float के लिए आवश्यक)

अगर आप float उपयोग करते हैं, तो पैरेंट को क्लियर करना आवश्यक है:

.demo::after {
    content: "";
    display: table;
    clear: both;
}

सर्वोत्तम अभ्यास

1. नए प्रोजेक्ट्स के लिए Flexbox या Grid उपयोग करें
2. gap प्रॉपर्टी का उपयोग स्पेसिंग के लिए करें (margin की जगह)
3. रिस्पॉन्सिव डिज़ाइन के लिए मीडिया क्वेरीज़ जोड़ें
4. box-sizing: border-box ग्लोबली सेट करें

रिस्पॉन्सिव उदाहरण (Flexbox)

.demo {
    display: flex;
    flex-wrap: wrap; /* मोबाइल पर स्टैक होने के लिए */
    gap: 20px;
}

.demo div {
    flex: 1 1 300px; /* न्यूनतम 300px, फिर बराबर बांटो */
    min-width: 250px;
}