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

Answer 2

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

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

要修复底部的空格，请将vertical-align: bottom添加到实际的img：

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

删除图像之间的空间归结为：bikeshedding CSS3 property alternative?

所以，这是一个在HTML中删除了空格的演示：http://jsfiddle.net/WSFnX/4/

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

DIV容器内的HTML图像底部对齐

4 个答案: