Question

我有以下标记：

<div id="container">
    <img src="images/behind.png" id="behind" />
    <div id="header">
    </div>
</div>

具有以下风格：＃容器 { margin-left：auto; margin-right：auto; 宽度：800px; }

#container #behind{
    float: right;
    margin-top: -50px;
    margin-right: -20px;    
}


#header {
    border: #ACACAC 1px solid;
    background: silver url('../images/headerbg.png') repeat-x;
    height: 100px;
    margin-top: 50px;
    position: relative;
    width: auto;
    margin-right: 0px;
}

现在这看起来像我想要的那样;然而，当我将登录框添加到标题并向右浮动时，它会移动到标题容器的右侧，但是以#behind中的图像宽度向右填充，大约为200px。

建议？

Answer 1

图像浮动旁边可能存在问题...尝试将图像放在a中然后浮动它。

例如：

<div id="container">
    <div id="behind"><img src="images/behind.png" /></div>
    <div id="header"></div>
</div>

Answer 2

据我了解你的情况，你有两个元素，都浮动到右边。这将导致这些元素彼此相邻。请看这里的示例4：http://j-cafe.com/floats.html

如果您希望#behind中的图像位于背景中并且登录框位于其上，则应将#behind中的图像设置为#container div中的背景图像，就像使用headerbg一样。 PNG。您可以将此对齐到右侧，如下例所示：

body {background:#ffffff url('img_tree.png') no-repeat right top;}

这样就不会再干扰登录框了。

浮动的背景div影响最重要的div的空间

2 个答案: