Question

我制作缩略图并希望有一个内部div来显示div中的一些内容。我希望内部div在底部不在顶部，任何想法如何改变它？谢谢

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

给.img_container position:relative，然后使用.cat_container和position:absolute将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。

Answer 2

您有90％的结果使用此css

 .img_container{
    height:150px;
    width:200px;
    cursor:pointer;
    border-radius:2px;
    background:#333;
    position: relative;
}

.img_container{
    height:150px;
    width:200px;
    cursor:pointer;
    border-radius:2px;
    background:#333;
  position: relative;
}

.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 0px;
    clear:both;
    width:100%;
    position:absolute;
    bottom:0;
}

在底部制作内部div

2 个答案: