Question

我很乐意帮助解决我的html代码问题。我有以下代码：

<img id="logo" src="images/logo.png">
<div id="content">
    <h2>header</h2>
    <p>text</p>
</div>

我的css代码是：

img#logo {
    width: 300px;
    position:absolute;
    right: 10px;
    z-index:-1;
}
div#content {
    text-align: center;
    border: 2px solid;
    border-radius: 25px;
    margin: 100px 25 0 25px;
}

我的问题是div在其边框内包含图像（因此它将图像从顶部拉到100px的边距。如果我在<br>之后添加了<img>，那么它就不会发生，但这不是解决问题的最佳方法。

有人知道如何解决这个问题吗？

Answer 1

这种情况正在发生，因为您已将图像定位为绝对意味着它已从页面流中取出。如果您只想将图像放在右侧，请尝试使用

float:right;
margin-right:10px;

而不是绝对定位。然后，您可以通过将clear:right添加到其样式

来确保内容div显示在图像下方

Answer 2

绝对徽标图片缺少顶部位置。右边距错误（缺少px） -

img#logo {
    width: 300px;
    position:absolute;
    right: 10px;
    top: 0;
    z-index:-1;
}
div#content {
    text-align: center;
    border: 2px solid;
    border-radius: 25px;
    margin: 150px 25px 0 25px;
}

Fiddle

div包括图像作为内容

2 个答案: