css - float :right and relative positioning

Question

这似乎应该是一个简单的解决方案，但我似乎无法弄明白。

我需要在每一页的同一位置放置一张图片。我需要文字环绕图像的顶部和底部。

http://jsfiddle.net/4AnsK/

注意到右上角的图像空间了吗？它不会随着图像向下移动。我明白为什么会这样，但我不知道如何让它发挥作用。

我试过使用相对定位并设置“top”值。我试过 margin-top，padding-top，把它放在一个绝对的 div 容器里等等。我好像想不通。感谢您的帮助。

Answer 1

这似乎可行，但它需要一点 HTML hack。基本上，您只需要在图像上方放置一个零宽度的垫片以将其向下推而不影响其他任何东西。

将此添加到 HTML 中，在图像之前:

<span id="evilNonSemanticSpacer"></span>

并使用这个 CSS:

#evilNonSemanticSpacer {
    float:right;
    display:block;
    height:210px;
}
img
{
    float: right;
    clear:right;
}​

从图像中移除相对定位，它位于正确的位置，文字环绕在它周围。示例 fiddle 是 here .

Chrome 的文字环绕有一个奇怪的地方(上面的线位于图像上方)。不过，它不会出现在 Firefox 中。我可以在 Chrome 中修复它的唯一方法是在 img 上使用 margin-top: 1.1em，但这也会导致在 Firefox 中图像上方出现空白(可能还有其他浏览器)。