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 に答える