ऊर्ध्वाधर- align: नाव के साथ नीचे: छोड़ दिया

Question

मैं कैसे कर सकता है कुछ divs कि float:left के लिए vertical-align:bottom?

आप स्रोत देख सकते हैं:

इस मैं क्या करना चाहते है(हर रंग एक अलग div है): http://jsfiddle.net/Lb1su4w2/

---

इस मैं क्या है है:

Answer 1

कार्यक्षेत्र संरेखित केवल इनलाइन ब्लॉक तत्वों के साथ काम करता है, जारी तत्वों खड़ी संरेखित संपत्ति ध्यान न दें।

अद्यतन निम्नलिखित के साथ बॉक्स वर्ग:

.box { 
    display: inline-block; 
    vertical-align: bottom; 
    width:80px; 
} 

मैं उन सभी इनलाइन ब्लॉक तत्वों बनाने के लिए और one of these techniques साथ सफेद स्थान को निकालना होगा।

अपडेट किया गया बेला: http://jsfiddle.net/9rcnLb8n/

वैकल्पिक रूप से आप align-self: flex-end; संपत्ति के साथ flexbox इस्तेमाल कर सकते हैं।

Answer 2

HTML:

<div id='wrapper'> 
    <div id='a' class='box'>aa</div> 
    <div id='b' class='box'>bb</div> 
    <div id='c' class='box'>cc</div> 
    <div id='d' class='box'>dd</div> 
</div> 

सीएसएस:

.box { 
    width:80px; 
    vertical-align: bottom; 
    display: inline-block; 
} 
#a { 
    background-color:red; 
    height:200px; 
} 
#b { 
    background-color:green; 
    height:100px; 
} 
#c { 
    background-color:yellow; 
    height:150px; 
} 
#d { 
    background-color:blue; 
    height:300px; 
} 

#wrapper { 
    border: 1px solid pink; 
    display: table; 
} 

इस मामले में उपयोग नहीं करते हैं:

float: left; 

इसके बजाय का उपयोग करें:

display: inline-block; 

मेरी बेला की जाँच करें:

http://jsfiddle.net/Lb1su4w2/6/