名称下的额外高度问题（flexbox）

Question

你好吗？我正在处理这个问题：我有两列宽度相等，但在名称下方的右列中，出现了额外的高度，因此两列之间的文本不等对齐。我把我正在工作的页面的 link 留在了这里，代码有人可以帮助我...

---LINK: http://c2260485.ferozo.com/the-team/

.tt-people {
  text-align: center;
  flex-direction: column;
}

.tt-people div {
  padding-bottom: 60px;
}

.tt-people .flex-container {
  flex-direction: column;
}

.tt-people .flex-container section {
  padding-bottom: 20px;
}

.tt-people h4 {
  font-family: fra-400;
  font-size: 46px;
  color: #614C8A;
  padding-top: 20px;
}

.tt-people section p {
  font-size: 18px;
  color: #263238;
}

.tt-p2,
.tt-p3 {
  font-size: 19px;
}

.tt-p2 {
  font-family: rwe-700;
  color: #604B87;
}

@media only screen and (min-width: 768px) {
  .tt-people div {
    padding-bottom: 100px;
  }
  .tt-people br {
    display: none;
  }
}

@media only screen and (min-width: 1300px) {
  .tt-people {
    padding: 80px 0;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
  }
  .tt-people .flex-container {
    flex-direction: row;
    width: 50%;
  }
  .tt-people-col2 {
    /* padding-left: 69px; */
  }
  .tt-people h4 {
    font-size: 46px;
    color: #614C8A;
    text-align: start;
    padding-top: 0;
  }
  .tt-people br {
    display: block;
  }
  .tt-people section p {
    font-size: 18px;
    color: #263238;
    text-align: start;
  }
  .tt-people section {
    padding-left: 35px;
    padding-bottom: 50px;
  }
  .tt-p2,
  .tt-p3 {
    font-size: 19px;
    text-align: start;
  }
  .tt-p2 {
    font-family: rwe-700;
    color: #604B87;
    /* padding-right: 9%; */
  }
  .tt-p3 {
    /* padding-right: 10%; */
  }
}

<section class="flex-container flex-nw tt-people">
  <div class="flex-container">
    <picture>
      <!-- <source srcset="" media="(min-width: )"> -->
      <img src="../wp-content/themes/CUSTOM/img/lee-tunstall.png" alt="MDN">
    </picture>
    <section>
      <h4>Lee Tunstall<br>PhD.</h4>
      <p class="tt-p1">SENIOR RESEARCH, WRITING AND<br>EDITING CONSULTANT</p>
    </section>

    <p class="tt-p2">Over the past 25 years, Lee Tunstall has crafted an eclectic career working with the public, private and non-profit sectors, while developing a unique understanding and perspective of the different environments.</p>
    <p class="tt-p3">This varied background makes her an effective consultant dealing with a variety of issues that have ranged from violence against women to seniors’ issues. With extensive and well-honed research skills, she communicates academic research to a more
      mainstream audience. Lee is a member of the Professional Writers Association of Canada, the Canadian Academy of Independent Scholars, and the Association of Independent Information Professionals. She is a sessional instructor in the Werklund School
      of Education at the University of Calgary, teaching online in the graduate research program. Lee holds a BA and MA from Carleton University and a PhD in History from the University of Cambridge.
    </p>
  </div>

  <div class="flex-container tt-people-col2">
    <picture>
      <!-- <source srcset="" media="(min-width: )"> -->
      <img src="../wp-content/themes/CUSTOM/img/lee-tunstall.png" alt="MDN">
    </picture>

    <section>
      <h4>Pamila Fonseka<br>BSc.</h4>
      <p class="tt-p1">SENIOR FUND DEVELOPMENT<br>CONSULTANT AND FACILITATOR</p>
    </section>

    <p class="tt-p2">Pamila has more than 10 years of experience raising funds for charities and motivating community support.</p>
    <p class="tt-p3">She is an established fundraiser in the non-profit sector, an ESG certification candidate, and a business proprietor. She has a proven record of planning, developing, and implementing strategic fundraising programs that have raised multiple million
      dollars for clients. She also develops standards, procedures, and processes for non-profits to meet industry and Canada Revenue Agency regulations and leads workshops for Board of Directors and senior leaders.
    </p>
  </div>
</section>

Answer 1

将 align-self: flex-start; 添加到具有 class tt-people-col-2. 的第二个 flex 容器中，这会修复您的对齐方式，然后要稍微清理一下，您可以添加 gap: 20px;在你的 parent flex-container 上，因为你正在使用 flex-wrap: nowrap;。您会注意到两个 <p> 标签之间的间距已关闭，因为您使用的是 Bootstrap，您只需添加一些 mt。但是，我会将文本嵌套在另一个 div.

中

名称下的额外高度问题（flexbox）

Issue with extra height under the names (flexbox)

html

css

twitter-bootstrap

flexbox

height