css - 使内部div显示在底部

Question

我制作了一个缩略图，希望有一个内部 div 来显示 div 中的一些内容。我希望内部 div 位于底部而不是顶部，知道如何更改它吗？谢谢

.img_container{
	height:150px;
	width:200px;
	cursor:pointer;
	border-radius:2px;
	background:#333
}
.img_container img{
	height:150px;
	width:200px;
	position:absolute;
	margin:0 auto;	
	z-index:-999999;
}
.cat_container{
	background: rgba(25, 25, 25, .5);
	color:#fff;
	padding:5px;
	clear:both;
}

<div class="thumbnail_container">
        <div class="thumbnail">
            <div class="img_container">
                <img src="" />
                <div class="cat_container">bottom</div>
            </div>         
 
        </div>         
            
   </div>

Answer 1

给 .img_container 一个 position:relative 然后使用 position:absolute 将 .cat_container 定位在底部和 bottom:0。

.img_container{
    height:150px;
    width:200px;
    cursor:pointer;
    border-radius:2px;
    background:#333;
    position:relative;
}
.cat_container{
    background: rgba(25, 25, 25, .5);
    color:#fff;
    clear:both;
    padding:5px 0;
    position:absolute;
    bottom:0;
    width:100%;
}

这是一个 demo .