HTML:
<div class="items-display">
<div class="item-container">
<?php foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
// echo $value['name'] . "</br>"; ?>
<img src="<?php echo $value['image_inventory']; ?>.png" width="90" height="60">
<?php if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
?>
<p> <?php echo $rarity; ?> </p>
<?php }
}
?>
</div>
</div>
CSS:
.item-display {
}
.item-container img {
height: 60px;
width: 95px;
background-color: grey;
color: white;
border-radius: 5px;
border: 2px solid #252525;
position: relative;
}
.item-container p {
height: 13px;
width: 95px;
background-color: #252525;
color: white;
text-align: center;
padding-bottom: 4px;
bottom: 0;
position: absolute;
}
输出:http://puu.sh/kYdjv/95aaccfc51.jpg
希望它看起来像这样:http://i.stack.imgur.com/Ld7hb.jpg
我希望它像图片一样出现在图片底部。但它不断出现在类之外。
最佳答案
你需要这样的东西:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.item-container {
position: relative;
display: inline-block;
border-radius: 5px;
overflow: hidden;
margin: 10px;
}
.item-container img {
display: block;
height: 60px;
width: 95px;
background-color: grey;
color: white;
border-radius: 5px;
border: 2px solid #252525;
}
.item-container p {
width: 95px;
background-color: red;
color: white;
text-align: center;
padding-bottom: 4px;
bottom: 0;
position: absolute;
}
<div class="item-container">
<img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
<p>Lorem ipsum</p>
</div>
关于html - 在 img 的底部显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33346356/