डीवी कंटेनर के अंदर एचटीएमएल छवि नीचे संरेखण

Question

मेरे पास एक निश्चित ऊंचाई के साथ एक div टैग है। अधिकांश छवियों में समान ऊंचाई और चौड़ाई होती है।

मैं div के नीचे छवियों को संरेखित करना चाहता हूं ताकि वे अच्छी तरह से व्यवस्थित हों।

<div id="randomContainer"> 
    <div id="imageContainer"> 
     <img src="1.png" alt=""/> 
     <img src="2.png" alt=""/> 
     <img src="3.png" alt=""/> 
     <img src="4.png" alt=""/> 
    </div> 
    <div id="navigationContainer"> 
     <!-- navigation stuff --> 
    </div> 
</div> 

सीएसएस लगता है:

div#imageContainer { 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

मैं display: table-cell के साथ नीचे और vertical-align: bottom सीएसएस गुण पर छवियों को संरेखित करने में कामयाब यहाँ मैं अब तक है।

क्या div-table के रूप में div को प्रदर्शित करने और DIV टैग के नीचे छवियों को संरेखित करने का एक क्लीनर तरीका है? http://jsfiddle.net/WSFnX/

display: table-cell है ठीक है, बशर्ते कि आप जानते हैं कि यह IE6/7 में काम नहीं करेगा कर रहे हैं का उपयोग करना:

Answer 1

यह आपके कोड है। उसके अलावा, यह सुरक्षित है: Is there a disadvantage of using `display:table-cell`on divs?

तल पर अंतरिक्ष को ठीक करने के लिए, वास्तविक img रों को vertical-align: bottom जोड़ें:

http://jsfiddle.net/WSFnX/1/

छवियों के बीच अंतरिक्ष निकाला जा रहा है इस करने पर निर्भर करता: bikeshedding CSS3 property alternative?

तो, यहां खाली स्थान के अपने HTML में निकाले जाने के साथ एक डेमो है: http://jsfiddle.net/WSFnX/4/

Answer 2

माता पिता सेट position:relative के रूप में div और position:absolute; bottom:0

के भीतरी तत्व

Answer 3

Flexboxes display: flex; या display: inline-flex;

div#imageContainer { 
    height: 160px; 
    align-items: flex-end; 
    display: flex; 
    flex-direction: column; 
} 

CSS-Tricks has a good guide for flexboxes

Answer 4

< div> कुछ अनुपात के साथ साथ align-items: flex-end; flex-direction: column; का उपयोग करके ऐसा कर सकते हैं

div { 
    position relative 
    width: 100%; 
    height: 100%; 
} 

< img> 'अपने स्वयं के अनुपात

img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: auto; /* to keep proportions */ 
    height: auto; /* to keep proportions */ 
    max-width: 100%; /* not to stand out from div */ 
    max-height: 100%; /* not to stand out from div */ 
    margin: auto auto 0; /* position to bottom and center */ 
}