कंटेनर तत्व के शीर्ष पर इनलाइन-ब्लॉक DIV को संरेखित करें

Question

जब दो की inline-block divअलग-अलग ऊंचाइयां होती हैं, तो दो में से छोटा कंटेनर के शीर्ष पर संरेखित क्यों नहीं होता है? ( DEMO ):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

मैं divअपने कंटेनर के शीर्ष पर छोटे को कैसे संरेखित कर सकता हूं ?

Comments

या उन्हें इस तरह फ्लोट करें: jsfiddle.net/RHM5L/12

— AO_

एक नज़र

— श्री विदेशी

लंबवत-संरेखित करें: शीर्ष; के लिए .स्मॉल क्लास

— दीपू

मैं फ्लोट का उपयोग नहीं करना चाहता। धन्यवाद @ Mr.Alien अब यह काम करता है :)

— Youssef

Answer 1

क्योंकि बेसलाइनvertical-align पर सेट किया गया है पर डिफ़ॉल्ट के रूप ।

vertical-align:topइसके बजाय उपयोग करें :

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

या जैसा कि @ f00644 ने कहा कि आप floatबाल तत्वों के लिए भी आवेदन कर सकते हैं ।

Comments

अगर मैं फ्लोट लगाता हूं तो मुझे ऊंचाई में समस्या होगी यदि कंटेनर में फ्लोटिंग बच्चे हैं जैसे मेरे मामले में। यहां एक नज़र डालें लेख

— यूसुफ

कोई भी विचार क्यों baselineडिफ़ॉल्ट है? मुझे यकीन है कि एक अच्छा कारण है, लेकिन एक गैर-उम्मीद के लिए यह सिर्फ अजीब लगता है। आप एक मैनहट्टन क्षितिज प्रभाव के साथ समाप्त होते हैं।

— श्रीधर सरनोबत ६

फॉन्ट अलाइनमेंट के लिए वर्टिकल एलाइन का उपयोग किया जाता है, क्योंकि फोंट में बेसलाइन होती है, यह सिर्फ तार्किक है कि डिफॉल्ट बेसलाइन का समाधान करता है। इस तरह के अन्य अवसरों में, आपको इसे ओवरराइट करना होगा।

— 11

Answer 2

आपको vertical-alignअपने दो बच्चे के लिए एक संपत्ति जोड़ने की जरूरत है ।

यदि .smallआप हमेशा छोटे हैं, तो आपको केवल संपत्ति को लागू करने की आवश्यकता है .small। हालांकि, यदि आप या तो सबसे लंबे हो सकते हैं, तो आपको संपत्ति को दोनों पर लागू करना चाहिए .smallऔर .big।

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

ऊर्ध्वाधर संरेखित इनलाइन या टेबल-सेल बॉक्स को प्रभावित करता है, और इस संपत्ति के लिए अलग-अलग मानों की एक बड़ी संख्या होती है। कृपया अधिक जानकारी के लिए https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align देखें।

Answer 3

<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})

Comments

मुझे लगता है कि इनलाइन से ब्लॉक तक के स्पैन के डिफॉल्ट डिस्प्ले प्रॉपर्टीज को केवल ट्रिक करेगी।

— पवित्रघोस्ततम

Answer 4

ओवरफ़्लो जोड़ें: कंटेनर डिव के लिए ऑटो। http://www.quirksmode.org/css/clearing.html यह वेबसाइट इस समस्या के होने पर कुछ विकल्प दिखाती है।