浮动：正确和相对定位

Question

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

我需要在每个页面上的同一位置放置图像。我需要文本环绕图像的顶部和底部。

http://jsfiddle.net/4AnsK/

请注意右上方图片的空间？它不会随着图像向下移动。我理解为什么会这样，但我无法弄清楚如何使它发挥作用。

我尝试过使用相对定位并设置“顶部”值。我已经尝试过margin-top，padding-top，把它放在一个绝对的div容器等等。我似乎无法弄明白。任何帮助表示赞赏。

Answer 1

这似乎有效，但它需要一些HTML黑客攻击。基本上，你只需要在图像上方放置一个零宽度的垫片，将其向下推，而不会影响其他任何东西。

在图片之前将其添加到HTML：

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

并使用此CSS：

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

从图像中移除相对定位，它位于正确的位置，文本环绕着它。示例小提琴是here。

Chrome的文字换行很奇怪（上面的一行位于图像上方）。但它并没有出现在Firefox中。我在Chrome中修复此问题的唯一方法是使用margin-top: 1.1em上的img，但这也会导致Firefox（以及其他浏览器）中图像上方的空白区域。

Answer 2

作为替代方案，可以将img放在第二段或第三段之后并删除top: 200px？这将产生类似的影响，虽然你不能保证它将完全是200px。否则你运气不好，段落会浮动在原来的位置。