eleman diğer öğe üzerinde ve altına sabitlenmiş

Question

Resim ile div ve görüntü adı ile bu ikinci div sahip olmak istiyorum.

p öğesinde uzun lorem ipsum yazıyorsam, üst div büyüyor, ancak üst div boyutunu tutmak istiyorum ve yalnızca p öğesinin adını daha büyük yapmak istiyorum.

Bu nasıl yapılır?

aşağıdaki gibi bir şey istiyorum:

Benim kod: Yani böyle

.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 yuvasına göreli konumlandırma ekledim ve p etiketi için mutlak konumlandırma. Paragraf olmadığı için p etiketini daha uygun bir şeye takas etmek isteyebilir. Muhtemelen başka bir div kullanırım.

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

Düzenleme

, bazı notlar ekledi.

Answer 2

Paragrafın üzerine gelindiğinde paragrafın genişlemesini istiyorsanız ve bunun overflow:hidden;'u .item-slot sınıfında kullanabilmeniz ve daha sonra üst kenar boşluğunu azaltabilirsiniz. Ne de olsa genişliği `eklemek çok iyi çalışıyor

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