这是一个创建于 3478 天前的主题，其中的信息可能已经有所发展或是发生改变。
有一固定尺寸的div，里面有多个img，想实现img都紧贴div底部的效果。
如果是单个img，我知道可以将div的position设置为relative，img的position设置为absolute,bottom=0进行对齐。但是当div内有多个img时这样会使得img重叠在div底部同一位置。
又因为position已经是absolute的缘故，不能通过float等属性自动将其排列开。
img数量较多，挨个设置位置比较繁琐。
求简单有效的底部对齐方法。
如果是单个img，我知道可以将div的position设置为relative，img的position设置为absolute,bottom=0进行对齐。但是当div内有多个img时这样会使得img重叠在div底部同一位置。
又因为position已经是absolute的缘故，不能通过float等属性自动将其排列开。
img数量较多，挨个设置位置比较繁琐。
求简单有效的底部对齐方法。
第 1 条附言 · 2015-06-20 11:51:43 +08:00
大家的方法总而言之都是在div里再套一个div，将这个div至于底部，然后将img至于内层div内。感谢各位！
 |
1
Twinkle 2015-06-20 00:37:02 +08:00
flexbox 不过兼容性不好
|
 |
3
yangg 2015-06-20 00:47:07 +08:00 via iPhone
你还没放假没
|
 |
5
banri 2015-06-20 00:51:18 +08:00
vertical-align: bottom
|
 |
6
Daniel65536 2015-06-20 00:53:44 +08:00 via iPad  1
vertical-alian bottom
display inline |
 |
7
Exin OP |
|
8
banri 2015-06-20 01:08:29 +08:00 1
@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> `` |
|
9
Exin OP @banri 除了vertical-align还需要两个display属性的设置，我在去掉你给出的任意一个display就不行了呢
|
|
11
yangg 2015-06-20 08:59:27 +08:00 1
也可以absolute啊，里面加个元素就可以了 http://codepen.io/yangg/pen/vOedVN?editors=110
|
 |
12
sneezry 2015-06-20 11:46:13 +08:00 via iPhone 1
img外层再给个div，这个div底部对齐，里面的img在正常的流里。
|
 |
13
biggun 2015-06-20 12:18:45 +08:00 via iPhone
可不可以bottom : 0 然後用n-th children的方法加margin呢
|
Select Language