html - 在 img 的底部显示 div

Question

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

我希望它像图片一样出现在图片底部。但它不断出现在类之外。

Answer 1

你需要这样的东西:

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