css - float:right 和相对定位

Question

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

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

注意到右上角的图像空间了吗？它不会随着图像向下移动。我理解为什么会发生这种情况，但我不知道如何使它工作。

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

score 8 · Accepted Answer

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

将此添加到 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（以及可能其他浏览器）中图像上方的空白。

score 0 · Accepted Answer

作为替代方案，可以将 img 放在第二段或第三段之后并删除top: 200px? 这将产生类似的效果，尽管您不能保证它会正好是 200 像素。否则你运气不好，段落会在原来的位置浮动。

2 回答 2