开始拉~，话说在css+div的年代里，网页布局成了代码高手的专利，没有点底子的人还真搞不定css+div,还是老老实实的table套table吧。table虽然不符合这标准，不符合那个标准，不过在布局方面确实还是宝刀不老的说。不过，必经是一个过去的时代的东西了，现在就说说如何让一个div实现底部对齐
<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
<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
作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/2786/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
最后编辑： jackxiang 编辑于2010-3-9 19:45
火狐firefox有没有显示CPU使用率、内存占有率 的插件
minicom的使用和配置（实现串口调试），minicom配置文件：/u评论列表
