如何使用spacer div（不適用於Safari）對齊右下圖像的文字？

我有一個固定的高度div，並希望將圖像與文本（未知/可變長度）的文本對齊，以環繞它。理想情況下，我最好避免使用Javascript，目前爲止最好的解決方案似乎是在圖像上方使用垂直隔離區div（這是容器的高度 - 圖像高度）來降低它。這在IE/FF上完美工作，但文本與safari上的圖像頂部重疊（移動和標準）。我不知道爲什麼會發生這種情況，我欣賞字體顯示不同，但肯定文本應該以任何方式繞過div/image？你可以在http://jsfiddle.net/deshg/XScmK/上看到我正在談論的一個例子，在這個例子中，我剛剛使用了帶有一些文本的彩色div而不是圖像。如何使用spacer div（不適用於Safari）對齊右下圖像的文字？

任何想法將大規模讚賞，因爲我不知道爲什麼這不起作用？

非常感謝如初，

戴夫

來源

2011-09-22 deshg

在一個快速解決您的第3格 margin-top:20px;

，但這會推高你1px的寬格。

也嘗試更改這些高度：141px到140px，並將159px更改爲160px。

來源

2011-09-22 16:55:11

非常感謝您的回覆，快速修復不是真的可行，因爲它只是增加了很多空間給其他瀏覽器，但高度的變化似乎緩解了這個問題，但我不知道爲什麼！其目的是能夠使用可變大小的圖像（頂部的隔離片只是容器高度減去圖像高度），但它不會出現，因爲它會以一定的尺寸重疊。你能解釋爲什麼它在某些高度而不是其他的重疊，因爲我不能爲我的生活理解它嗎？非常感謝您的幫助，Dave – deshg

Dave，它與每個瀏覽器interprits行高有關。你可以嘗試使用：font：12px/16px verdana，helvetica，sans-serif; （16px將在那裏的行高） –

如果你對答案感到滿意，請投票和接受它;） –

如何使用spacer div（不適用於Safari）對齊右下圖像的文字？

回答

相關問題