如何使用spacer div（不在Safari中工作）对齐右下角图像周围的文本？

Question

我有一个固定的高度div，并希望将图像与文本（未知/可变长度）的右下角对齐以包围它。我理想地想避免使用Javascript，到目前为止最好的解决方案似乎是使用图像上方的垂直间隔div（容器高度 - 图像高度）将其向下推。这在IE / FF上非常有效，但文本在safari（移动和标准）上与图像的顶部重叠。我不确定为什么会发生这种情况，我很欣赏字体的显示方式不同但是文本应该以div / image的方式流动？你可以在http://jsfiddle.net/deshg/XScmK/看到我正在谈论的一个例子，我在这个例子中只使用了带有文字而不是图像的彩色div。

任何想法都会被大量赞赏，因为我不确定为什么这不起作用？

非常感谢，

戴夫

Answer 1

在你的第3个div margin-top:20px;中进行快速修复，但这会推高你的1px宽div。

也尝试更改这些高度：141px到140px，并将159px更改为160px。