[转]在css+div里面实现div的底对齐

1、之前代码:

<style>
#parent{
width:300px;
height:300px;
background:gray;
}
#i_want_to_be_bottom{
width:100px;
height:30px;
background:red;
}
</style>
<div id="parent">
    <div id="i_want_to_be_bottom"></div>
</div>

 
[转]在css+div里面实现div的底对齐

修改后代码:

<style>
#parent{
width:300px;
height:300px;
background:gray;
position:relative;
}
#i_want_to_be_bottom{
width:100px;
height:30px;
background:red;
position:absolute;
bottom:0px;
}
</style>
<div id="parent">
    <div id="i_want_to_be_bottom"></div>
</div>

 
[转]在css+div里面实现div的底对齐
 变动点提示

#parent{
....
postion:relative;
....
}
#i_want_to_be_bottom{
....
position:absolute;
bottom:0px;
....

当然,你也可以设置子div的margin选项达到底对齐的目的,但是如果父div的高度是可变的时候,这样做就不行了。所以,达到子div底对齐的万能办法是使用如上所述办法,当然,有的时候,你可以使用子div的right:0px来达到右对齐的目的。

你可能感兴趣的:(css+div)