html - 将 <div> 与父级 <div> 的右下角对齐？

Question

我在 MVC 应用的布局页面顶部有几组链接，但我无法正确定位这些链接。

它们应该是这样的(我正在对该站点进行一些巨大的更改，但保持布局不变):

请记住，这张照片位于我页面的右中，也就是说，页面进一步向右延伸，但该区域没有任何内容。

将这些基于图像的链接更改为基于文本的链接后，它们失去了样式的完整性和困惑。

这是我当前链接中的一些代码，可以让您了解它们是如何包含的:

<div class="top-links">
    <div id="top-nav">
        <a class="top-link" href="#" title="My Profile">
            <span>MY PROFILE</span>
        </a>
        <a class="top-link" href="#" title="Account Profile">
            <span>ACCOUNT PROFILE</span>
        </a>
        <a class="top-link" href="#" title="Sign Out">
            <span>SIGN OUT</span>
        </a>
    </div>
</div>
<div class="links">
    <div id="nav">
        <a class="home-link home-link-left" href="#" title="My Component Books">
            <span>MY COMPONENT BOOKS</span>
        </a>
        <a class="home-link" href="#" title="New Component Book">
            <span>NEW COMPONENT BOOK</span>
        </a>
        <a class="home-link" href="#" title="System Logs">
            <span>SYSTEM LOGS</span>
        </a>
    </div>
</div>

为了便于阅读，我省略了部分标签本身。

最后是相关的 CSS:

/*----------- TOP NAVIGATION -----------*/
.top-links {
    float: right;
    height: 31px;
    margin: 0 0 0 0;
    width: auto
}

.top-link {
    font: 7pt Georgia, serif;
    color: #E1915C;
    text-align:center;
    text-decoration: none;
    line-height: 34px;
    padding: 10px;
}

#top-nav {
    float: right;
    margin: 0 0 0 0;
    overflow: hidden;
}

/*----------- NAVIGATION -----------*/
.links {
    float: right;
    width: auto;
    height: 36px;
    overflow: hidden;
    bottom: 0;
    right: 0;
}

.home-link {
    font: 7.25pt Georgia, serif;
    color: #E1915C;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #E1E1E1;
    text-align: center;
    line-height: 36px;
    width: auto;
    padding: 10px;
}

    .home-link:hover {
        color: #369AAA;
    }

.home-link-left {
    border-left: 1px solid #E1E1E1;
}

.home-link-right {
    border-right: 1px solid #E1E1E1;
}

#nav {
    position: absolute;
    float: right;
    overflow: hidden;
}

对不起，如果它看起来有点多，其中一些不是我的原始代码，我不确定我应该/不应该包括什么。

我不是最擅长 CSS 的人，所以任何样式专家都可以给我一些见解，让我了解如何使链接按照屏幕截图中的布局进行布局吗？

Answer 1

这是 jsFiddle:http://jsfiddle.net/FVjhQ/2/

CSS

#profile-nav {
     margin-bottom: 25px;
}
.nav-container,
.nav-container li {
     margin: 0;
     padding: 0;
}
.nav-container {
     clear: right;
     float: right;
}
.nav-container li {
     border-left: 1px solid #E1E1E1;
     float: left;
     list-style: none;
     line-height: 36px;
}
.nav-container a {
     font: 7.25pt Georgia, serif;
     color: #E1915C;
     text-decoration: none;
     font-weight: bold;
     padding: 10px;
     text-transform: uppercase;
}
.nav-container a:hover {
     color: #369AAA;
}
.nav-container .last-link {
     border-right: 1px solid #E1E1E1;
}
.no-border li {
     border: 0;
}

HTML

<ul id="profile-nav" class="nav-container no-border">
    <li>
        <a href="#" title="My Profile">My Profile</a>
    </li>
    <li>
        <a href="#" title="Account Profile">Account Profile</a>
    </li>
    <li>
        <a href="#" title="Sign Out">Sign Out</a>
    </li>
</ul>

<ul id="component-nav" class="nav-container">
    <li>
        <a href="#" title="My Component Books">My Component Books</a>
    </li>
    <li>
        <a href="#" title="New Component Books">New Component Books</a>
    </li>
    <li>
        <a href="#" title="Notifications">Notifications</a>
    </li>
    <li class="last-link">
        <a href="#" title="System Logs">System Logs</a>
    </li>
</ul>