html - div 在父 div 中的绝对定位

Question

我有一个header div作为2个div的父div，左右分别是“登录”和“注册”。我能够正确定位正确的 div，但文本的底部没有相互对齐。添加 left: 0 bottom: 10 和 position: absolute 到左边的 div 使 header 消失。请帮忙。谢谢。

.header {
    position: relative;
    padding-bottom: 10px;
    display:block;
    overflow:auto;
}

#left {
    font-size: 50px;
    color: white;
}

#right {
    position: absolute; 
    right: 0; 
    bottom: 10;
    color: white;
}

这是html代码

<div class="content">
    <div class="header">
        <div id="left">LOGIN</div>
        <div id="right">
            Don't have an account? <a href="#">sign up</a>
        </div>
    </div>



    <div class="testbox">
        <form action="/">
            <label id="icon" for="name"><i class="icon-envelope "></i></label> <input
                type="text" name="name" id="name" placeholder="Email" required /> <label
                id="icon" for="name"><i class="icon-user"></i></label> <input
                type="text" name="name" id="name" placeholder="Name" required /> <label
                id="icon" for="name"><i class="icon-shield"></i></label> <input
                type="password" name="name" id="name" placeholder="Password"
                required />
            <div class="gender">
                <input type="radio" value="None" id="male" name="gender" checked />
                <label for="male" class="radio" chec>Male</label> <input
                    type="radio" value="None" id="female" name="gender" /> <label
                    for="female" class="radio">Female</label>
            </div>
            <a href="#" class="button">Register</a>
        </form>
    </div>
</div>

Answer 1

我看到您已经将 bottom:10 使用基于 css 的单位，例如“em”、“px”等。

此外，有时“底部”仅在您为父元素(在本例中为标题)定义了隐式高度时才有效

.header {
    position: relative;
    padding-bottom: 10px;
    display:block;
    overflow:auto;
    height:100px;/* or any height you like, if not specified then bottom:xpx will not work in some cases */
}

这是我制作的一支笔来演示相同的内容。
http://codepen.io/Prashantsani/pen/yriHa