[转]在css+div里面实现div的底对齐
2017-04-13 10:25
281 查看
1、之前代码:
![](http://dl.iteye.com/upload/attachment/528281/f97b8899-d05a-37d0-b86d-8028093e77b6.gif)
修改后代码:
![](http://dl.iteye.com/upload/attachment/528284/1d849884-f3ff-312e-9117-2fe20e053292.gif)
变动点提示
#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
![](http://dl2.iteye.com/upload/attachment/0052/8281/f97b8899-d05a-37d0-b86d-8028093e77b6-thumb.gif)
大小: 2.7 KB
![](http://dl2.iteye.com/upload/attachment/0052/8284/1d849884-f3ff-312e-9117-2fe20e053292-thumb.gif)
大小: 2.1 KB
查看图片附件
<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>
![](http://dl.iteye.com/upload/attachment/528281/f97b8899-d05a-37d0-b86d-8028093e77b6.gif)
修改后代码:
<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>
![](http://dl.iteye.com/upload/attachment/528284/1d849884-f3ff-312e-9117-2fe20e053292.gif)
变动点提示
#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
![](http://dl2.iteye.com/upload/attachment/0052/8281/f97b8899-d05a-37d0-b86d-8028093e77b6-thumb.gif)
大小: 2.7 KB
![](http://dl2.iteye.com/upload/attachment/0052/8284/1d849884-f3ff-312e-9117-2fe20e053292-thumb.gif)
大小: 2.1 KB
查看图片附件
相关文章推荐
- Div + CSS里面的文在前面的文本居左,后面的文本居右想当于左右分段对齐
- CSS布局之div交叉排布与底部对齐--flex实现
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
- css中怎么让div里面的文字底部对齐
- CSS实现div或ul,li水平对齐不换行
- CSS实现div或ul,li水平对齐不换行
- css实现div内一段文本的两端对齐
- jquery里面实现将css中的style里面的属性取到的方法。如:用jquery取div的top值
- DIV相对于父DIV底部对齐的实现方法-Div+CSS教程
- CSS实现DIV表格圆角
- div+css使用!important标记实现Firefox和IE6处理padding尺寸上的兼容
- div+css实现鼠标放上去,背景跟图片都会变化。
- 全部代码实现圆角框(div+css)
- div+css实现Firefox和IE6兼容的垂直居中
- div 实现长英文字母自动换行CSS
- DIV+CSS实现的拖动+隐藏/显示效果+背景变暗
- Div+css+js实现高度适应浏览器,做出的效果像winform
- JS轻松实现CSS设置,DIV+CSS常用CSS设置
- JS轻松实现CSS设置,DIV+CSS常用CSS设置
- div+css实现鼠标放上去,背景跟图片都会变化。