DIV容器中的HTML圖像底部對齊方式

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> 

的CSS是這樣的：

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

我設法在與display: table-cell底部和vertical-align: bottom CSS屬性對齊圖像。

是否有一種更簡潔的方式將div顯示爲table-cell並將圖像對齊到DIV標籤的底部？

Answer 1

這是你的代碼：http://jsfiddle.net/WSFnX/

使用display: table-cell是好的，前提是你知道它不會在IE6/7工作。除此之外，它的安全：Is there a disadvantage of using `display:table-cell`on divs?

在底部固定的空間，加上vertical-align: bottom實際img S：

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

刪除的圖像之間的空間歸結爲：bikeshedding CSS3 property alternative?

因此，下面是一個在您的HTML中刪除空白的演示：http://jsfiddle.net/WSFnX/4/

Answer 2

設置父級DIV爲position:relative並position:absolute; bottom:0

內部元件

Answer 3

Flexboxes可以通過使用align-items: flex-end; flex-direction: column;與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>一些比例完成此

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 */ 
}