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

[转]在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>

?

修改后代码：

<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;....}?
当然，你也可以设置子div的margin选项达到底对齐的目的，但是如果父div的高度是可变的时候，这样做就不行了。所以，达到子div底对齐的万能办法是使用如上所述办法，当然，有的时候，你可以使用子div的right:0px来达到右对齐的目的。本例来源：http://blog.sina.com.cn/s/blog_4c4a58ca01000bed.html

查看更多 下一篇