如何使用flexbox在div元素内添加文本？

Question

我想在卡片元素的右下角添加文本。我要输入的文字是Innings和Average。我已经创建了弹性框，但是诸如局框和平均值之类的文本没有显示在右下角。

代码：

.playercard1 {
  display: flex;
  align-items: flex-start;
  height: 120px;
  width: 500px;
  margin-top: 30px;
  margin-left: 30px;
}

.item {
  padding-left: 10px;
}

.info {
  margin-top: 25px;
}

<div class="playercard1">
  <img class="profilepic" src="./profile.jpg">
  <div class="item">
    <div class="info">
      <h6>Naman Kohli, Team Name, Right-Hand bat</h6>
      <h2 className="cardtitle1">150</h2>
      <p>Innings:5</p>
      <p>Average:40.67</p>
    </div>
  </div>
</div>

在我的屏幕截图中，您可以看到底数和平均数未显示在右下角。检查以下屏幕截图：

我要实现的目标在下面的屏幕截图中看到，我想在右下角显示局和平均值，如下面的屏幕截图中所示。

Answer 1

这是我的解决方案，它并不完美，但是它将为您提供一个起点

.playercard1 {
  display: flex;
  align-items: flex-start;
  height: auto;
  width: 500px;
  margin-top: 30px;
  margin-left: 30px;
  border: 1px solid black;
  padding: 10px;
}

.item {
  padding-left: 10px;
  flex:1;
}

.info {
  margin-top: 25px;
}
.flex{
  display:flex;
  justify-content:space-between;
}
.cardtitle1{
  font-size:24px;
}

<div class="playercard1">
  <img class="profilepic" src="https://placehold.it/100x100">
  <div class="item">
    <div class="info">
      <div>Naman Kohli, Team Name, Right-Hand bat</div>
      <div class="flex">
        <div class="cardtitle1">150</div>
        <div>
          <div>Innings:5</div>
          <div>Average:40.67</div>
        </div>

      </div>

    </div>
  </div>
</div>

---

使用position:absolute

.playercard1 {
  display: flex;
  align-items: flex-start;
  height: auto;
  width: 500px;
  margin-top: 30px;
  margin-left: 30px;
  border: 1px solid black;
  padding: 10px;
  position: relative;
}

.item {
  padding-left: 10px;
  flex: 1;
}

.info {
  margin-top: 25px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.cardtitle1 {
  font-size: 30px;
  margin-top:25px;
}

.absolute {
  position: absolute;
  bottom: 10px;
  right: 15px;
}

<div class="playercard1">
  <img class="profilepic" src="https://placehold.it/80x80">
  <div class="absolute">
    <div>Innings:5</div>
    <div>Average:40.67</div>
  </div>
  <div class="item">
      <div>Naman Kohli, Team Name, Right-Hand bat</div>
      <div class="cardtitle1">150</div>
  </div>
</div>

Answer 2

.playerCard{
            display: flex;
            align-items: flex-start;
            height: 120px;
            width: 500px;
            margin-top: 30px;
            margin-left: 30px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.4);
            padding: 15px;

        }

        .playerCard .player_profile_pic{
            display: inline-block;
            vertical-align: top;
            
            border-radius:50px; 
            

        }

        .playerCard .player_profile_pic img{
            border-radius: 100%;
            width: 100px;
            height: 100px;
        }

        .playerCard .player_details_div{
            display: inline-block;
            vertical-align: top;
            margin-top: 10px;
            margin-left: 15px;
            width: calc(100% - 30px);
        }

        .player_details_div .player_name_det{
            font-size: 16px;
        }

        .player_details_div .rank_ings_main_div{
            width: 100%;
        }

        .rank_ings_main_div .number_div{
            font-size: 30px;
            text-align: left ;
            float: left;;
        }

        .rank_ings_main_div .avg_ings_div{
            float: right;
            text-align: right;
        }

        .avg_ings_div p{
            margin: 5px 0; 
        }

<div class="playerCard">

        <div class="player_profile_pic">
            <img src="https://i.stack.imgur.com/l60Hf.png" alt="">
        </div>

        <div class="player_details_div">
            <div class="player_name_det">
                Naman Kohli , Team Name, Right Hand Bat
            </div>

            <div class="rank_ings_main_div">
                <div class="number_div">150</div>
                <div class="avg_ings_div">
                    <p>Innings : 3</p>
                    <p>Average : 50.00</p>
                </div>
            </div>

        </div>

    </div>

我想你需要这样的东西。

希望这会有所帮助。