这是一个创建于 3841 天前的主题，其中的信息可能已经有所发展或是发生改变。
有一固定尺寸的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