浮动:正确和相对定位

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;
}?

从图像中删除相对定位,它位于正确的位置,文本环绕它.这个例子小提琴是在这里.

Chrome的文字包装很奇怪(上面的线条位于图像上方).但它并没有出现在Firefox中.我可以在Chrome margin-top: 1.1em上修复它的唯一方法是img,但这也会导致Firefox(以及可能的其他浏览器)中图像上方的空白区域.