0

有人可以向我解释如何在 a 的底部移动 a ！我不敢相信我正在为一些我认为很简单的事情而苦苦挣扎。

我正在使用 .net 中提供的 mvc 模板（html5），代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left" style="border: 2px solid red">
                <p class="site-title">
                    @Html.ActionLink("My website", "Index", "Home")
                </p>
            </div>
            <div class="float-right" style="border: 2px solid red;">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>
                    &copy; @DateTime.Now.Year - MyWebsite.com</p>
            </div>
        </div>
    </footer>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

虽然没有在上面的代码中显示，但我的 div 的高度将为 101px，我希望导航菜单显示在 div 内的右下方，但我尝试在 site.css 中使用各种设置并使用内联样式，正如我所说，我无法让它显示在我想要的位置！我仍在谷歌搜索，但希望有人能为我提供解决方案。我在这上面花了太多时间！

谢谢。

4

2 回答 2

2

看看这个：工作示例：http: //jsfiddle.net/YNBxz/792/

首先，我将 div 的位置设为相对位置。然后我将导航向右浮动，将位置设置为绝对位置和底部：0，右侧：0。

HTML：

<div id ="div1" >
        Here is a div with height 101px

        <nav>
           <a href="http://www.google.com/">Google</a> |
           <a href="http://www.bing.com/">Bing</a>
        </nav>  
</div>

CSS：

#div1 {
   position:relative;
   height:101px;
   width:100%;
   border:2px solid black;
}


#div1 nav {


float:right;
position:absolute;
bottom:0;
right:0;

}
于 2012-11-29T06:21:41.087 回答
0 
<div style="border: 2px solid red;float:right;">
           <nav>
                <ul id="menu">
                    <li>Home</li>
                    <li>about</li>
                    <li>contact</li>
                </ul>
            </nav>
        </div>​

http://jsfiddle.net/YNBxz/792/

于 2012-11-29T03:03:24.417 回答