html - 使用 html、div 和 css 的带有登录框的 3 行布局

Question

我喜欢使用 HTML、CSS 和 DIV 创建一个 3 行布局，例如:here .

此外，我需要在第一行的右上角有一个固定宽度的登录框。

我试过了:

<div id="container">
    <div id="top">
        <div id="header"></div>
        <div id="signin"></div>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

body {
    margin:0;
    padding:0;
}
div#top {
    position:fixed;
    width:100%;
    height:65px;
    z-index:100;
    background-color:#AAA;
}
div#header {
    width:100%;
    height:65px;
    background-color:#F00;
    float:left;
}
div#signin {
    width:100px;
    height:65px;
    background-color:#0F0;
    float:right;
}
div#footer {
    width:100%;
    height:65px;
    position:fixed;
    bottom:0;
    background-color:#06F;
}
div#content {
    background-color:#111;
    width:100%;
    height:100%;
    position:absolute;
}

但是登录框放在第一行下面；见here .

如何将登录框放在第一行的右边？ TIA!

Answer 1

您需要将 positon:absolute; 和 right:0px; 添加到 signin 选择器试试这个

div#signin {
    width:100px;
    height:65px;
    background-color:#0F0;
    position: absolute;
    right:0px;
}

DEMO 这里