[转]在css+div里头实现div的底对齐
日期：2014-05-17 浏览次数：20709 次
[转]在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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
