Question

在我的CSS中，我创建了一个菜单栏<div>和一个标题<div>。我的目的是让菜单行与标题背景图像的BOTTOM齐平，所以我已经嵌套了标题内的菜单。唉，它不起作用，我无法弄清楚原因。

我创建了一个fiddle，但我无法弄清楚如何上传相关的图片文件，因此我附上了标题占位符图片 header background placeholder 。我还上传了一个线框 Wireframe ，展示了我正在努力实现的目标。

如果你无法查看小提琴，这是我的HTML和CSS：

HTML：

<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
    <title>Test</title>
    <LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>

<body>
    <div id="header" >
        <div id="menubar">
            <a href="#">home</a>  |  <a href="#">about</a>  |  <a href="#">contact</a>
        </div>
    </div>
</body>
</html>

CSS：

body     {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 12px;
    }

h1    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 2em;
    }

h2    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1.5em;
    margin-left: 5%;
    }

h3    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1em;
    margin-left: 20%;
    }

p    {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif
    font-size: 12px;
    padding: 0px 0px 0px 600px;
    margin: 0px:
    float: bottom;
    }

a    {
    color: #000064;
    text-decoration: none;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    }

a.visited {
    color: #640064;
    weight: bold;
    text-decoration: none;
    }

#header {
    height: 120px;
    background-color: #ffffff;
    background-image: url(headerblock.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    float: bottom;
    }

#menubar {
    border-width: 1px 0px 1px 0px;
    border-color: #000064;
    border-style: solid;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    line-height: 16px;
    float: bottom;
    padding: 0px 0px 0px 600px;
    margin: 0px 0px 0px 0px;
    }

#menubar a {
        text-decoration: none;
        color: #000064;
        float: bottom;
        }

#menubar a.visited {
    text-decoration: bold;
    color: #000000;
    float: bottom;
        }

有人有什么想法吗？

Answer 1

将图像放在标题内的单独div中，如下所示：

<div id="header">
    <div id="banner"></div><!--
 --><div id="menubar"></div>
</div>

然后在display: inline-block;和#banner上使用#menubar 请注意#banner之后和#menubar之前的HTML评论。要删除这些元素之间的空白区域，如果您不关心空白区域，可以将其删除。请查看此信息以获取更多信息：Fighting the Space Between Inline Block Elements。

检查fiddle。

顺便说一下，您应该使用<ul>和<li>进行导航并在分隔符上使用边框，而不是|。这是用于演示，演示文稿应该用css处理，而不是html。

Answer 2

你的#menubar还有一个填充600px，将div推出。另外Float不能是Bottom，而是Left或Right。

为了完美地将position:relative添加到标题div并将position:absolute; bottom:0px; left:0px;放置到子div，请将其完全放置

Answer 3

float参数接受left或right。没有float: bottom这样的东西。

但是如果你将position: relative添加到标题div中。您可以使用position: absolute; left: 0; bottom: 0;

定位菜单

<强>更新

您可能必须为菜单栏指定宽度，以防止文本向下包裹。

如何在不同div中的背景图像上浮动div

3 个答案: