其他元素上的元素并固定在底部

Question

我希望div包含图片，第二个div包含图片名称。

如果我在p元素中键入long lorem ipsum，则父div会变大，但我想保持父div的大小，只需用名称生成更大的p元素。

怎么做？

我想要以下内容：

我的代码：

<div class="item-slot">
    <img src="http://cdn.steamcommunity.com/economy/image/something_here">
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

CSS：

.item-slot {
width:100px;
height:100px;
background:rgba(20, 25, 9, 0.5);
border:1px solid #364500;
padding-top:5px;
display:inline-block;
margin-bottom:4px;
text-align:center;
}
.item-slot>p {
background-color:red;
text-align:center;
font-size:10px;
z-index:100000;
}
.item-slot>img {
top:20px;
width:85px;
height:66px;
}

Answer 1

这样吗？ https://jsfiddle.net/2xqrqmfz/

我在.item-slot中添加了相对定位，并在p标签上添加了绝对定位。可能想要将p标签换成更合适的东西，因为它不是段落。我可能会使用另一个div。

.item-slot {
width:100px;
height:100px;
background:rgba(20, 25, 9, 0.5);
border:1px solid #364500;
padding-top:5px;
display:inline-block;
margin-bottom:4px;
text-align:center;
position:relative;
}
.item-slot>p {
  position:absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
background-color:red;
text-align:center;
font-size:10px;
z-index:100000;
}
.item-slot>img {
top:20px;
width:85px;
height:66px;
}

<div class="item-slot">
    <img src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsRVx4MwFo5_T3eAQ3i6DMIW0X7ojiwoHax6egMOKGxj4G68Nz3-jCp4itjFWx-ktqfSmtcwqVx6sT/360fx360f">
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

编辑，添加了一些笔记。

Answer 2

我认为您希望段落在悬停时展开并将其保留在div中，因此您可以在overflow:hidden;类中使用.item-slot，然后在p的悬停效果中可以减少上边距。

以下是代码：

＆＃13;

＆＃13;

.item-slot {
width:100px;
height:100px;
background:rgba(20, 25, 9, 0.5);
border:1px solid #364500;
padding-top:5px;
display:inline-block;
margin-bottom:4px;
text-align:center;
overflow: hidden;
}
.item-slot>p {
background-color:red;
text-align:center;
font-size:10px;
z-index:100000;
}
.item-slot>img {
top:20px;
width:85px;
height:66px;
}
.item-slot p:hover{
  margin: -1em 0 0 0;

  
} 

＆＃13;

<div class="item-slot">
    <img src="http://cdn.steamcommunity.com/economy/image/something_here">
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

＆＃13;

＆＃13;

＆＃13;