不正确地将DIV元素放置在图像旁边

Question

所以我在问自己，为什么champ_info类的div不放在图像的旁边，因为图像是一个内联块元素。因此，我的div元素中的文本位于图像下面，而不是图像旁边。我的密码在下面。

​

.champ_info {
  background: #0b2e33;
  color: white;
}

.champ_container {
  background: #10474e;
}

.champ_img {
  border: 3px solid #1ba9bd;
  border-radius: 50%;
  margin: 5px;
  height: 5rem;
  width: auto;
}

<div class="champ_container">
  <img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
  <div class="champ_info">
    Some Text
  </div>
</div>

​

提前谢谢你。

Answer 1

<div>是一个块元素，这意味着它占据了整个行。将display: inline;放入<div>的css中，它将其放置在图像旁边，就像您想要的那样。

如果希望文本与顶部对齐，请添加vertical-align: top;。由于图像和文本对齐到父文件的底部，所以需要手动设置它们以对齐到顶部。

​

.champ_info {
  background: #0b2e33;
  color: white;
  display: inline;
  vertical-align: top;
}

.champ_container {
  background: #10474e;
}

.champ_img {
  border: 3px solid #1ba9bd;
  border-radius: 50%;
  margin: 5px;
  height: 5rem;
  width: auto;
}

<div class="champ_container">
  <img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
  <div class="champ_info">
    Some Text
  </div>
</div>

​