ये div क्षैतिज रूप से गठबंधन क्यों नहीं हैं? वे लाइन तोड़ क्यों देते हैं?

Question

यह HTML:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
</div>

क्यों लाल divs एक ही क्षैतिज पंक्ति में नहीं हैं और कैसे मैं उन्हें एक ही पंक्ति में मिलता है?

Answer 1

ठीक है, तो divs मैं ब्लॉक तत्व हैं और कभी-कभी मेनू युक्त divs का उपयोग करें। तो आप display: inline-block नामक स्टाइल प्रॉपर्टी को आंतरिक divs में जोड़ सकते हैं, और यदि आप चाहते हैं कि उन divs को कंटेनर div के अंदर केंद्रित किया जाए तो आप text-align: center का उपयोग कर सकते हैं। यह सभी प्रकार के ब्लॉक तत्वों पर काम करेगा।

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>

Answer 2

यह div एस और अन्य सभी ब्लॉक तत्वों का डिफ़ॉल्ट व्यवहार है। इसे बदलने के लिए आपको या तो displayinline-block या float से left या right पर सेट करना होगा। (float: left; सेट करने से उनके कंटेनर के बाईं तरफ के तत्वों को उचित ठहराया जाएगा और float: right; उन्हें सही तरफ उचित ठहराएगा।) मैं inline-block के साथ अभ्यास करने की अनुशंसा करता हूं। यह आमतौर पर एक बेहतर समाधान है क्योंकि यह float करता है, क्योंकि पड़ोसी तत्वों के साथ बातचीत से उन्हें हटाने के बजाय दस्तावेज़ के सामान्य प्रवाह में तत्वों को छोड़ देता है।

Answer 3

यहाँ आप के लिए क्या देख रहा है:

<style type="text/css"> 
    div.littleDiv { 
     display: inline-block; 
     border:1px 
     solid red; 
     height:50px; 
     width:80px; 
    } 
</style> 
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
</div> 

यह एक लंबे समय नाव प्रयोग करने के लिए संभव हो गया है, लेकिन अब इनलाइन ब्लॉक के साथ यह और भी आसान है। इनलाइन-ब्लॉक तत्व इनलाइन तत्वों की तरह हैं लेकिन उनमें चौड़ाई और ऊंचाई हो सकती है।

हालांकि आप display: inline-block;

के बजाय float: lefts उपयोग करने के लिए से MDN

नाव सीएसएस संपत्ति निर्दिष्ट करता है कि एक तत्व सामान्य प्रवाह से लिया जाना चाहिए और बाईं या दाईं साथ रखा चाहते हो सकता है इसके कंटेनर की तरफ, जहां टेक्स्ट और इनलाइन तत्व इसके चारों ओर लपेटेंगे। एक फ़्लोटिंग तत्व वह है जहां फ्लोट का गणना मूल्य कोई नहीं है।

Answer 4

डिव एलिमेंट्स डिफ़ॉल्ट रूप से ब्लॉक स्टाइल तत्व हैं। आदेश क्षैतिज LVL में इसे बनाने के लिए में शैली प्रदर्शन विशेषता इनलाइन-ब्लॉक कर सकते हैं या तैरने लगते हैं उन्हें बाएं या दाएं:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
</div> 

या:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
    </div> 

Answer 5

यह एक चाल, अन्य उत्तर इस विस्तार पाठ के अनुरूप याद आ रही थी क्या किया: केंद्र ;.

धन्यवाद दोस्तों!

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>