Question

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

我的html页面已包含一些内容，并且未修改该内容我想在现有内容的中间插入 某些消息 （例如插入图片）把div放在最上面。

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

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

说明：插入内容顶部内容的图片，div位于顶部

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

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

说明：插入的图片使用css在内容的中间对齐，但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修改。

如果你们能提供帮助，请告诉我们！

Answer 1

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

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

strong:before{ 
    content:url('http://s14.postimg.org/miss2r3xt/html_css.jpg'); 
}

Answer 2

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

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

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

你的fidlle，用这种方法更新：

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

Answer 3

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

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


}

在这里查看工作演示：Demo

如何在现有内容中对齐div元素

3 个答案: