代码之家 › 专栏 › 技术社区 › Maeaex1

在HTML和CSS中,图片左对齐,文本和标题右对齐

alignment image css html

0

Maeaex1 · 技术社区 · 6 年前

这个问题发了很多次,我看了一下 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%
}

1 回复 | 直到 6 年前

1

ManUtopiK 6 年前

你应该用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>