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

我个人发现使内嵌块级元素内联计数器变得直观。 Flex box是您解决问题的完美解决方案。

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

Answer 2

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

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

2 个答案: