设置子DIV位于父亲DIV的低端

一般div进行嵌套编写的时候,子div会默认位于父div的上方

1
2
3
4
<div style="width:200px;height:50px;border: 1px solid red;">
<div style="width:100%; height:30px; border:1px solid blue;">
</div>
</div>

显示效果如下:




先如果要让子div位于父div的低端

方法一:可以用通过设置zidiv的margin属性,但是这个需要写死偏移多少为px,如果是再按照写百分比设置的div显得很不好操作

方法二:设置父div的position为relative,然后设置子div的position为absolute, bottom为0

1
2
3
4
<div style="width:200px;height:50px;border: 1px solid red;position: relative;">
<div style="width:100%; height:30px; border:1px solid blue;position: absolute;bottom: 0">
</div>
</div>

此时就可以看到子div位于父div的底部了




文章目录
,