html - 2 使用 Flex 的图像旁边的元素

Question

我正在尝试获得以下结果(使用 flexbox)

这就是我使用下面的代码得到的结果

我正在使用以下代码，它正在对齐图像，但它将对齐元素应用于所有元素，因此另一个 h6 也 float ..

.block {
  display: flex;
  align-items: center;
}

<div class="block">
  <img src="/img/person.jpg" />
  <h5>Jordan Baker</h5>
  <h6>Owner of Bavet</h6>
</div>

我错过了什么吗？谢谢

Answer 1

你应该把你的标题放在另一个包装器里

<div class="block">
  <img src="/img/person.jpg" />
  <div class="wrapper">
    <h5>Jordan Baker</h5>
    <h6>Owner of Bavet</h6>
  </div>
</div>