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