Question

这似乎应该是一个简单的解决方案, 但我似乎无法找出答案。

我需要在每页的同一位置放置一个图像。我需要文本来覆盖图像的上部和下部。

http://jsfiddle.net/4AnsK/" rel="nreferrer" >http://jsfiddle.net/4AnsK/

注意右上角的图像空间吗? 它不会随图像而变化。我理解为什么会发生这种情况, 但我不知道如何让它运作。

我尝试过使用相对定位和设置“顶”值。我尝试过边顶、垫垫顶,把它放入一个绝对的Div容器等。我似乎无法弄清楚。任何帮助都是感激不尽的。

Answer 1

这似乎有效,但它需要一些 HTML 黑客。基本上,你只需要在图像上方放一个零维的空格来将其推倒,而不影响其他任何东西。

添加到 HTML 中, 在图像前 :

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

使用此 CSS :

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

从图像中移除相对位置, 位置正确, 周围有文字环绕。示例是 < a href="http://jsfidle. net/4AnsK/11" >here 。

有一种奇特的铬文字环绕( 上面的行位于图像上方) 。它不会出现在 Firefox 中。在 Chrome 中, 我唯一能够修正它的方法是 < code> margin- top: 1. 1 em 在 < code> img 上, 但是在 Firefox 图像上方( 可能还有其他浏览器), 也会导致白空。

Answer 2

作为替代办法,能否在第二段或第三段之后放置隐形人,并删除 top: 200px ? 这将产生类似的影响, 尽管您无法保证它将完全为200px。否则, 您将失去运气, 段落将围绕原始位置浮动。

友情链接