html - 图像左侧，文本和标题在 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。

这里是一段代码:

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