Question

我已经在这方面工作了一段时间，并且在资源之后查找了资源，我无法找到问题的解决方案。

第三部分图像（class =“mtt3”）不会与其他部分图像的顶部对齐。当我添加一个新图像时，它将它添加到“底部”可以说。我怎样才能让这些图像与其他图像对齐？

或者是否有更有效的方法来创建三行图像？最初我想要三行，并且它们都要水平对齐。但即使是内联块和浮动：左，我无法实现这一点。

最后一部分不需要回答，这个问题的焦点是让dang mtt3部分图像与其他两个部分的顶部对齐。

转到整页，查看我在运行时所说的内容。

 .meettheteam { text-align: center; background-color: #f2707e; color: #ffffff; }
  
  .banner { max-width: 100%; height: auto; width: auto; padding-top: 2%; }
  
  .mtt, .mtt2, .mtt3 { display: inline-block; top 0px; left: 20px; max-width: 100%; height: auto; width: auto; }

<div class="meettheteam">
  <section class="banner">
    <img  src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576445849f74567f15556571/1466189188385/STL-Meettheteam-Mobile.png" alt="meet the team banner">
  </section>

  <section class="mtt">
    
    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bab87cd0f68c0f2524dc1/1467722631930/STL-Team-Hannah.png" alt="Meet the Team Images">
    <figcaption>Hannah</figcaption> 
    
    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577babd3cd0f68c0f2524fb8/1467722707482/STL-Team-Gracie.png">
      <figcaption>Gracie</figcaption>
    
    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577badc837c58134dd1f6d4f/1467723208878/STL-Team-Carrigan.png">
      <figcaption>Carrigan</figcaption>
    
</section>

  <section class="mtt2">
    
    <img style="width: 85%;"
 src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577babffcd0f68c0f25250ca/1467722751989/STL-Team-Hart.png" alt="Meet the Team Images">
      <figcaption>Hart</figcaption>
    
    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bac26cd0f68c0f25251a3/1467722791264/STL-Team-Alyx.png">
      <figcaption>Alyx</figcaption>
    
    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bac97579fb30e7f442827/1467722904067/STL-Team-Erin-H.png" alt="Meet the Team Images">
    <figcaption>Erin</figcaption>
    
  </section>
  
  <section class="mtt3">
    
    <img style="width: 85%;"
 src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bae0037c58134dd1f6f5b/1467723265219/STL-Team-Jennie.png" alt="Meet the Team Images">
      <figcaption>Hart</figcaption>
    
	<img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bac46cd0f68c0f252523b/1467722822562/STL-Team-Kaityln.png">
    <figcaption>Kaitlyn</figcaption>

  </section>
</div>

Answer 1

根据.mtt, .mtt2, .mtt3规则添加vertical-align:top

＆＃13;

.meettheteam {
  text-align: center;
  background-color: #f2707e;
  color: #ffffff;
}
.banner {
  max-width: 100%;
  height: auto;
  width: auto;
  padding-top: 2%;
}
.mtt,
.mtt2,
.mtt3 {
  display: inline-block;
  top 0px;
  left: 20px;
  max-width: 100%;
  height: auto;
  width: auto;
  vertical-align:top;
}

＆＃13;

<div class="meettheteam">
  <section class="banner">
    <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576445849f74567f15556571/1466189188385/STL-Meettheteam-Mobile.png" alt="meet the team banner">
  </section>

  <section class="mtt">

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bab87cd0f68c0f2524dc1/1467722631930/STL-Team-Hannah.png" alt="Meet the Team Images">
    <figcaption>Hannah</figcaption>

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577babd3cd0f68c0f2524fb8/1467722707482/STL-Team-Gracie.png">
    <figcaption>Gracie</figcaption>

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577badc837c58134dd1f6d4f/1467723208878/STL-Team-Carrigan.png">
    <figcaption>Carrigan</figcaption>

  </section>

  <section class="mtt2">

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577babffcd0f68c0f25250ca/1467722751989/STL-Team-Hart.png" alt="Meet the Team Images">
    <figcaption>Hart</figcaption>

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bac26cd0f68c0f25251a3/1467722791264/STL-Team-Alyx.png">
    <figcaption>Alyx</figcaption>

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bac97579fb30e7f442827/1467722904067/STL-Team-Erin-H.png" alt="Meet the Team Images">
    <figcaption>Erin</figcaption>

  </section>

  <section class="mtt3">

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bae0037c58134dd1f6f5b/1467723265219/STL-Team-Jennie.png" alt="Meet the Team Images">
    <figcaption>Hart</figcaption>

    <img style="width: 85%;" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/577bac46cd0f68c0f252523b/1467722822562/STL-Team-Kaityln.png">
    <figcaption>Kaitlyn</figcaption>

  </section>
</div>

＆＃13;

如何使第三部分图像对齐？

1 个答案: