Question

我有一个长页面，文字根据浏览器大小的宽度调整宽度（和高度）。例如，我有：

 <h1 id="loc1">Title</h1>

 <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy 
 bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy 
 bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy</p>

 <h2 id="loc2">Subtitle</h2>

 <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy 
 bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy
 bodycopy bodycopy</p>

我希望将image1的右上角（使用绝对CSS）排在“Title”的左上角，将image2的右上角排在“Subtitle”的左上角。但是，由于文本包装，标题的绝对位置会发生变化。

例如，是否可以将ID设置为“Subtitle”（类似Subtitle，然后使用JQuery或Javascript来指定image2的CSS绝对位置，以基于'loc2'的X和Y位置？

Answer 1

我没有在那里看到图片标签，但您可以将图片浮动到左侧以创建您正在谈论的那种效果。（不需要绝对定位）请注意，我还将每个title / img / paragraph设置为div

示例小提琴：http://jsfiddle.net/DPja2/

<div id="one">
    <img id="newImage" src="#">

    <h1 id="loc1">Title</h1>

    <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy           bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy</p>
</div>

并使用类似于：

的CSS

#newImage {
    height: 70px;
    width: 70px;
    float: left;
}

编辑：根据评论中的讨论新小提琴：http://jsfiddle.net/DPja2/1/

更改了css

#newImage {
    position: absolute;
    height: 70px;
    width: 70px;
}
#loc1 {
    position: relative;
    left: 120px;
    top: 20px;
}

并添加了一些JS

var position = $("#loc1").position();
$("#newImage").css("top", position.top);
$("#newImage").css("left", position.left - 70);

使用绝对css将图像排列到包装的文本

1 个答案: