मुख्य div

Question

पर नीचे div को संरेखित करें मेरे पास दो divs हैं, एक दूसरे के अंदर है और मैं मुख्य div के बटम पर छोटे div को गठबंधन करना चाहता हूं।

यहां मेरा कोड अभी तक है। वर्तमान में, बटन मुख्य div के शीर्ष पर है, इसके बजाय मैं इसे नीचे स्थित करना चाहता हूं। किसी भी सहायता की सराहना की जाएगी।

.vertical_banner { 
    border: 1px solid #E9E3DD; 
    float: left; 
    height: 210px; 
    margin: 2px; 
    padding: 4px 2px 10px 10px; 
    text-align: left; 
    width: 117px; 
} 

#bottom_link{ 
vertical-align: bottom; 
} 

यहाँ कैसे मैं इसे उपयोग करने की कोशिश कर रहा है, लेकिन जैसा कि आप देख सकते हैं मैं अभी भी सीएसएस :)

<div class="vertical_banner"> 
    <div id="bottom_link"> 
     <input type="submit" value="Continue"> 
     </div> 
</div> 

Answer 1

इस तरह अपने सीएसएस संशोधित करने के लिए नया हूँ:

.vertical_banner { 
 
    border: 1px solid #E9E3DD; 
 
    float: left; 
 
    height: 210px; 
 
    margin: 2px; 
 
    padding: 4px 2px 10px 10px; 
 
    text-align: left; 
 
    width: 117px; 
 
    position:relative; 
 
} 
 

 
#bottom_link{ 
 
    position:absolute;     /* added */ 
 
    bottom:0;       /* added */ 
 
    left:0;       /* added */ 
 
}

<div class="vertical_banner"> 
 
    <div id="bottom_link"> 
 
     <input type="submit" value="Continue"> 
 
     </div> 
 
</div>

Answer 2

मुझे लगता है कि आप निरपेक्ष स्थिति की आवश्यकता होगी

012,

.vertical_banner {position:relative;} 
#bottom_link{position:absolute; bottom:0;} 

Answer 3

यह जब तक आप पूर्ण स्थिति या जावास्क्रिप्ट का उपयोग HTML में वास्तव में संभव नहीं है। तो एक ही समाधान #bottom_link को यह सीएसएस देने के लिए होगा:

#bottom_link { 
    position:absolute; 
    bottom:0; 
} 

नहीं तो आप कुछ जावास्क्रिप्ट का उपयोग करना होगा। यहां एक jQuery ब्लॉक है जो पृष्ठ की सादगी के आधार पर चाल चलाना चाहिए।

$('#bottom_link').css({ 
    position: 'relative', 
    top: $(this).parent().height() - $(this).height() 
}); 

Answer 4

अपने माता पिता div position: relative दें, तो अपने बच्चे div position: absolute, इस वसीयत निरपेक्ष स्थिति इसके जनक के अंदर div देते हैं, तो आप बच्चे bottom: 0px;

उदाहरण यहाँ दे सकते हैं देखें:

http://jsfiddle.net/PGMqs/1/

Answer 5

इस प्रयास करें:

#b { 
display: -webkit-inline-flex; 
display: -moz-inline-flex; 
display: inline-flex; 

-webkit-flex-flow: row nowrap; 
-moz-flex-flow: row nowrap; 
flex-flow: row nowrap; 

-webkit-align-items: flex-end; 
-moz-align-items: flex-end; 
align-items: flex-end;} 

यहां एक JSFiddle डेमो है: http://jsfiddle.net/rudiedirkx/7FGKN/।