Question

我有一个header div作为2个div的父div，左边和右边是“登录”和“注册”。我能够正确定位正确的div，但文本的底部没有彼此对齐。向左侧div添加left: 0 bottom: 10和position: absolute会使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”等。

此外，有时“bottom”仅在您为父元素定义隐式高度时才有效（在本例中为标题）

.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

Answer 2

其中一种方法是使用float。

DEMO：JSFiddle

标题的HTML：

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

CSS：

.header {
    padding-bottom: 10px;
    display:block;
    overflow:auto;
}
#left {
    font-size: 50px;
    float: left;
}
#right {
    float: right;
    margin-top: 30px;
}
.clearfix {
    clear: both;
}

Answer 3

你可以试试这个：

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

#right {
    position: absolute; 
    right: 0; 
    bottom: 10;
    color: black;
    margin-top: 30px;
    float:left;
}
.clearfix {
    clear: both;
}

上面的CSS对我来说很好。请在此处查看：JSFiddle

Answer 4

您使用的是错误的css值。您应该使用bottom:10px;而不是bottom:10;

<强> FIDDLE

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

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

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

Answer 5

只需以像素为单位给出值

#right {
    position: absolute; 
    bottom:20px;
    right:0;
}

Demo

父div中div的绝对定位

5 个答案: