div 内 img 批量底部对齐的方法？

有一固定尺寸的div，里面有多个img，想实现img都紧贴div底部的效果。
如果是单个img，我知道可以将div的position设置为relative，img的position设置为absolute,bottom=0进行对齐。但是当div内有多个img时这样会使得img重叠在div底部同一位置。
又因为position已经是absolute的缘故，不能通过float等属性自动将其排列开。
img数量较多，挨个设置位置比较繁琐。
求简单有效的底部对齐方法。

Twinkle

2015-06-20 00:37:02 +08:00

flexbox 不过兼容性不好

Exin

2015-06-20 00:41:03 +08:00

@Twinkle 最好支持Chrome……

yangg

2015-06-20 00:47:07 +08:00

你还没放假没

Exin

2015-06-20 00:50:53 +08:00

@yangg what？

banri

2015-06-20 00:51:18 +08:00

vertical-align: bottom

Daniel65536

2015-06-20 00:53:44 +08:00

vertical-alian bottom
display inline

Exin

2015-06-20 00:58:13 +08:00

@banri
@Daniel65536
vertical-align是最先尝试的方法，没用啊……

banri

2015-06-20 01:08:29 +08:00

@Exin 可以的

``
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>
.out {
width: 800px;
height: 800px;
display: table;
}

.in {
display: table-cell;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="out">
<div class="in">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
<img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
</div>
</div>
</body>
</html>

``

Exin

2015-06-20 01:21:03 +08:00

@banri 除了vertical-align还需要两个display属性的设置，我在去掉你给出的任意一个display就不行了呢

banri

2015-06-20 01:26:18 +08:00

@Exin 嗯 -w- 是的
这个方法也可以用来进行不定高度的绝对居中 -w-

yangg

2015-06-20 08:59:27 +08:00

也可以absolute啊，里面加个元素就可以了 http://codepen.io/yangg/pen/vOedVN?editors=110

sneezry

2015-06-20 11:46:13 +08:00

img外层再给个div，这个div底部对齐，里面的img在正常的流里。

biggun

2015-06-20 12:18:45 +08:00

可不可以bottom : 0 然後用n-th children的方法加margin呢

Exin

2015-06-20 12:41:27 +08:00

@biggun 不错的想法欸，我试了试，似乎参数里的n无法用在内部使用

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/199956

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.