<![CDATA[向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除]]> http://jackxiang.com/index.php zh-cn http://jackxiang.com/post// <![CDATA[在css+div里面实现div的底对齐]]> jack <xdy108@126.com> Tue, 09 Mar 2010 11:44:42 +0000 http://jackxiang.com/post//

<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>

点击在新窗口中浏览此图片

变动后代码:


<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>



点击在新窗口中浏览此图片

三、变动点提示

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

提示：一个是relative ，一个是absolute，bottom：0px，这三个点！

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

来源：http://blog.sina.com.cn/s/blog_4c4a58ca01000bed.html
]]> http://jackxiang.com/post//#blogcomment <![CDATA[[评论] 在css+div里面实现div的底对齐]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://jackxiang.com/post//#blogcomment