如何让子元素居于父元素底部?其实这是个很简单的问题,只是父元素和子元素的css都需要修改一下:
.parent{
position: relative;
width:200px;
height: 100px;
background: dodgerblue;
}
.content{
position: absolute;
width: 200px;
height: 30px;
background: orange;
bottom: 0;
}
<body>
<div class="parent">
<div class="content"></div>
</div>
</body>
上面的代码我解释一下,只要父元素的posiiton设置为relative,子元素的位置就是相对于父元素的,这样设置子元素的bottom为0,即可将子元素置于父元素底部。
截图: