Question

有人可以向我解释如何在底部移动！我无法相信我正在努力做一些我认为简单的任务。

我正在使用.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的底部，但我尝试在网站中使用各种设置。 css和使用内联样式，正如我所说，我不能让它显示我想要的地方！我还在谷歌搜索，但希望有人能为我找到解决方案。我花了太多时间在这上面！

感谢。

Answer 1

看看这个：工作示例：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;

}

Answer 2

<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/

将<nav>放在<div> </div> </nav>的底部

2 个答案: