HTML 圖像底部 alignment 在 DIV 容器內

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 顯示為表格單元格並在 DIV 標簽底部對齊圖像？

Answer 1

將父 div 設置為position:relative並將內部元素設置為position:absolute; bottom:0 position:absolute; bottom:0

Answer 2

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

使用display: table-cell很好，只要您知道它在 IE6/7 中不起作用。 除此之外，它是安全的： 在 div 上使用 `display:table-cell` 有缺點嗎？

要固定底部的空間，請將vertical-align: bottom添加到實際的img中：

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

刪除圖像之間的空間歸結為： bikeshedding CSS3 屬性替代？

所以，這是一個在 HTML 中刪除空格的演示： http://jsfiddle.net/WSFnX/4/

Answer 3

Flexbox 可以通過使用align-items: flex-end; flex-direction: column; 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 有一個很好的彈性盒指南

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