html - 不使用位置 :absolute 将内容对齐到 div 的底部

Question

嘿，有一种方法可以在不使用 position:absolute 的情况下将 div 标签的内容对齐到底部。互联网上几乎所有其他解决方案都使用 position:absolute 和/或 vertical-align:bottom，但是有没有办法在不使用 position:absolute 的情况下做到这一点 ，比方说我如何将图像中的猫与此 fiddle 中的 div 底部对齐谢谢!

我想到的另一个解决方案是填充顶部的空白空间，以便将图像向下推到底部，但我也不知道该怎么做。

附言如果可能的话，请不要建议在 div 中使用表格。

Answer 1

你可以尝试类似的东西

<div style="border:1px solid black; height:100px; display:table; width:100%;">

    <div style="display:table-cell; vertical-align: bottom;">
        <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" />
    </div>  
</div>