在 HTML 和 CSS 中，图像左侧、文本和标题向右对齐顶部

Question

这个问题被多次发布，我查看了this post，但无法弄清楚为什么它在我的情况下不起作用。

图像在左侧，文字在右侧，但文字显示在图像下方，而不是并排显示。

HTML：

<section id="my-team">
  <div class="container">
    <h1>Thats my Title</h1>
    <div class="team">
        <div class="post-thumb"><img src="./img/Team/picture1.jpg"></div>
        <div class="post-content">
          <h3 class="post-title">Team Member 1</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="post-thumb"><img src="./img/Team/picture2.jpg"></div>
        <div class="post-content">
          <h3 class="post-title">Team Member 2</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="post-thumb"><img src="./img/Team/picture3.jpg"></div>
        <div class="post-content">
          <h3 class="post-title">Team Member 3</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
  </div>
</section>

CSS：

#my-team .team {
    margin: 20px 20px 0 0;
    overflow:auto;
}

#my-team .post-thumb {
    float:left;
}

#my-team .post-thumb img {
    display:block;
    width:30%;
    height:30%;
}
#my-team .post-content {
    margin-left: 33%
}

#my-team .post-title {
    font-weight: bold;
    font-size: 200%
}

Answer 1

你应该用一个 div 包裹每一行（类 member）。并使用flex 而不是混合float。

这里是代码sn-p：

#my-team .team {
    margin: 20px 20px 0 0;
    overflow:auto;
}

#my-team .member {
    display: flex;
    margin-bottom: 10px;
}

#my-team .post-thumb {
    margin-right: 10px;
}

#my-team .post-thumb img {
}

#my-team .post-content {
}

#my-team .post-title {
    margin-top: 0;
    font-weight: bold;
    font-size: 200%
}

<section id="my-team">
  <div class="container">
    <h1>Thats my Title</h1>
    <div class="team">
      <div class="member">
        <div class="post-thumb"><img src="https://via.placeholder.com/150"></div>
          <div class="post-content">
            <h3 class="post-title">Team Member 1</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
        <div class="member">
          <div class="post-thumb"><img src="https://via.placeholder.com/150"></div>
          <div class="post-content">
            <h3 class="post-title">Team Member 2</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
        <div class="member">
          <div class="post-thumb"><img src="https://via.placeholder.com/150"></div>
          <div class="post-content">
            <h3 class="post-title">Team Member 3</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
    </div>
  </div>
</section>