50

我有一个固定高度的 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-cellcssvertical-align: bottom属性对齐。

有没有更简洁的方法将 div 显示为表格单元格并在 DIV 标签底部对齐图像?

4

4 回答 4

64

将父 div 设置为position:relative,将内部元素设置为position:absolute; bottom:0

于 2012-08-30T16:48:31.557 回答
50

这是你的代码:http: //jsfiddle.net/WSFnX/

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

要固定底部的空间,请添加vertical-align: bottom到实际img的 s:

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

删除图像之间的空间归结为:bikeshedding CSS3 属性替代?

因此,这是一个在 HTML 中删除了空格的演示:http: //jsfiddle.net/WSFnX/4/

于 2011-06-29T13:00:59.230 回答
21

Flexbox 可以通过使用align-items: flex-end;withdisplay: flex;display: inline-flex;

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

    /* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
    /*flex-direction: row;*/
}

JSFiddle 示例

CSS-Tricks 有一个很好的弹性盒指南

于 2016-05-04T23:33:04.323 回答
10

<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 */
}
于 2016-06-13T09:55:59.667 回答