他の要素の要素で底に固定

Question

divに画像を、この2番目のdivに画像の名前を入れたいと思います。

p要素にlong lorem ipsumを入力すると、親divが大きくなりますが、親divのサイズを保持したいだけで、名前が大きいp要素を作成します。

これを行う方法？

私は、次のような何かをしたい：

私のコード：だから、このような

.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

：

<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

？ 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内に入れておきたいと思います。これは.item-slotクラスのoverflow:hidden;を使用し、次にpのホバー効果で上マージンを減らすことができます。

ここではコードです：

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

 
    
 
}

<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>