Question

好的，我已经看到了大量关于此的信息，但是没有一个建议的修复对我有用，或者我可能没有正确理解，所以如果有人可以打破这个对我来说很好，或指向另一个链接。我有一系列的div来制作我的标题，一个主要的容器，里面浮动的徽标，然后另一个右边的容器，工作得很好，但内部的“菜单”容器中包含两个div，一个应该是在顶部，另一个在底部......可视化它，顶部的登录或注册链接，以及底部的一系列菜单链接。问题是应该位于底部的那些实际上是在登记和登录链接下面的顶部。如果那没有给你一个视觉图片，那么这里是实际的标题http://www.sunnahspace.com/pages/header.php我已经尝试了很多东西，也许我只是尝试过错了。我已经尝试了整体，定位绝对的东西，老实说，我甚至不知道这意味着什么，但我感觉我朝着正确的方向前进。在此先感谢任何人的帮助！

    <style type="text/css"> 
.header_links {
    font-family: GeosansLight;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
}
.header_menu {
    font-family: GeosansLight;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
}
#header {
    background-image:url(../img/header_bg.jpg);
    background-repeat:repeat-x;
    width:100%;
    height:111px;
    }
#logo {
    float:left;
    margin-left:20px;
    }
#header_menu_container {
    float:right;
    margin-right:20px;
    height:111px;
    }
#header_menu_top {
    margin-top:10px;
    vertical-align:top
    }
#header_menu_bottom {
    margin-top:10px;
    vertical-align:bottom
    }
</style> 
<div id="header"> 
<div id="logo"> <a href="index.php"><img src="../img/logo.png" width="390" height="105" alt="SunnahSpace"></a> 
</div> 
<div id="header_menu_container"> 
<div id="header_menu_top" align="right"><a href="login.php" class="header_links">Login</a> <span class="header_links">|</span> <span class="header_links"><a href="join.php" class="header_links">Join</a></span> 
</div> 
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><a href="../index.php" class="header_links"><span class="header_menu">Home</span></a><span class="header_menu"> | <a href="profile.php" class="header_menu">Profile</a> | <a href="about.php" class="header_menu">About</a> | <a href="contact.php" class="header_menu">Contact</a></span> 
</div> 
</div> 
</div> 



     <style type="text/css"> 
.header_links {
    font-family: GeosansLight;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
}
.header_menu {
    font-family: GeosansLight;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
}
#header {
    background-image:url(../img/header_bg.jpg);
    background-repeat:repeat-x;
    width:100%;
    height:111px;
    }
#logo {
    float:left;
    margin-left:20px;
    }
#header_menu_container {
    float:right;
    margin-right:20px;
    height:111px;
    }
#header_menu_top {
    margin-top:10px;
    vertical-align:top
    }
#header_menu_bottom {
    margin-top:10px;
    vertical-align:bottom
    }
</style> 
<div id="header"> 
<div id="logo"> <a href="index.php"><img src="../img/logo.png" width="390" height="105" alt="SunnahSpace"></a> 
</div> 
<div id="header_menu_container"> 
<div id="header_menu_top" align="right"><a href="login.php" class="header_links">Login</a> <span class="header_links">|</span> <span class="header_links"><a href="join.php" class="header_links">Join</a></span> 
</div> 
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><a href="../index.php" class="header_links"><span class="header_menu">Home</span></a><span class="header_menu"> | <a href="profile.php" class="header_menu">Profile</a> | <a href="about.php" class="header_menu">About</a> | <a href="contact.php" class="header_menu">Contact</a></span> 
</div> 
</div> 
</div>

Answer 1

将以下内容添加到您的样式

#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}

div自动转到顶部

1 个答案: