DIV元素未正确放置在图像旁边

Question

所以我在质疑自己为什么带有类champ_info的div不会放在图像旁边，因为图像是一个内联块元素。所以我的div元素中的Text位于图像下方而不是图像旁边。我的代码如下。

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

Answer 2

我个人发现固有的块级元素内联计数器直观。 Flex盒子是您解决问题的完美解决方案。

.champ_container {
  width: 40%;
  margin: 0 auto;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  background: #10474e;
}

.champ_info {
  background: #0b2e33;
  color: white;
  width: 100%;
  height: 100%;
}

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