3

我将在这里用一个小例子来解释：

我已经有一些内容的 html 页面，并且在不修改该内容的情况下，我想通过将 div 留在顶部来在现有内容的中间插入一些消息（比如插入图像）。

看看这张图片，这是在做一些 css 工作之前：

http://i.stack.imgur.com/uhJbx.png

说明：图片插入到内容的顶部，带有div的内容在顶部

现在在应用 css 之后，我想在内容之间放置一些位置，如下所示：

http://i.stack.imgur.com/67YFf.png

说明：插入的图像在内容中间对齐，但 div 位于顶部

HTML：

<div class="myimg">
    <img src=http://s14.postimg.org/miss2r3xt/html_css.jpg />
</div>
<p>Some paragraph    </p>

<strong>What is HTML?</strong>

<strong>What is CSS?</strong>
<p>Some paragraph</p>

CSS：

.myimg {
    position: absolute;
}

这是一个简单示例的链接，我试图在jsfiddle进行修改。

让我知道你们是否可以提供帮助！！！

4

3 回答 3

2

要使用 CSS 添加一些元素，请查看:after和:before。

例如，您可以将此行添加到您的 css

strong:before{ 
    content:url('http://s14.postimg.org/miss2r3xt/html_css.jpg'); 
}
于 2013-07-31T10:26:46.523 回答
2

如果您接受 jQuery 解决方案，这会将图像放在内容中第一段之后：

$(document).ready(function(){
    var theImg = $('.myimg').remove(); 
    $('p').first().after(theImg);
});

如果您的内容中有标记，请使用该标记而不是$('p').first().

你的小提琴，用这种方法更新：

http://jsfiddle.net/ZjCfp/9/

于 2013-07-31T10:28:05.413 回答
1

在不修改 html 内容的情况下尝试下面的 css 来定位图像：

.myimg {
margin-top: 100px;
}
div.myimg + p {
 position: absolute;
  top: 0px;
    left: 0px;


}

看看这里的工作演示：Demo

于 2013-07-31T10:21:32.483 回答