html - div自动到顶部

Question

好吧，我已经看到了很多关于这个的信息，但是没有一个建议的修复对我有用，或者也许我只是没有正确理解，所以如果有人能为我分解这个基础，那就太好了，或将我指向另一个链接。我有一系列 div 来制作我的标题，一个带有 Logo 的主容器向左浮动，然后另一个容器向右浮动，一切正常，但内部“菜单”容器包含两个 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;
}