html - 使用行高 : 100% is staggering the elements instead of making them match in height

Question

如果这很难遵循，我深表歉意。
我正在挑战自己只使用 CSS 和 HTML 来构建这个网站，以提高我的 CSS 技能。我遇到了一个有两行的路障，每行包含三个“卡片”元素。卡片的高度到处都是，我无法找到解决方案来修复它。我添加了以 px、em 和 % 值定义的行高。我无法以 px 为单位定义卡片的高度并仍然保持响应，所以我以 % 定义了它。高度:100% 会导致卡片溢出和交错，即使没有足够的内容来证明行为是正确的。中间卡的底部下降，右侧的两张重叠。我试过 max-height: 100% 来防止它们溢出，但这没有任何作用，因为内容不需要它们中的任何一个自己溢出。我试过 min-height: 100% 但这给了我同样的 height: 100% 问题。我知道我一定在这里遗漏了一些东西(这可能是一些显而易见且非常简单的东西)，但我不知道它是什么。
片段

The current CSS is as follows :
/*Cards*/

.container {
  display: grid/*| inline-grid*/
  ;
  grid-template-columns: 33%, 33%, 33%;
  grid-template-rows: 100px, 100px;
}

section .container {
  background-color: transparent;
}

.card-row {
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  line-height: 100%;
  text-align: center;
  /*height: 90%;*/
}

.card {
  width: 27%;
  border-radius: 20px 0px 20px 0px;
  background-color: rgba(77, 111, 117, .3);
  background-color: #96c6d9;
  display: inline-block;
  margin: 1em;
  /*height: 33em;*/
  height: 100%;
}

.card-heading {
  line-height: 2em;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
}

.card p {
  padding: .7em;
}

a.card {
  text-decoration: none;
  color: #121212;
}

.card:hover {
  border: 2px solid #f2f2f2;
  box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}

<section class="container m-a">
  <div class="card-row">
    <!--card 1-->
    <a class="card" href="#Copyright">
      <img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
      <div class="card-heading">
        <h3 class="center">Copyright, Censorship, and Plagiarism</h3>
      </div>
      <p class="left">
        Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
        first amendment rights and what you, as a publisher, should know about censorship.'
      </p>
    </a>
    <!--card 2-->
    <a class="card" href="#PubDigital">
      <img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
      <h3 class="center">Publishing in Digital Media</h3>
      <p class="left">
        A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
        essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
      </p>
    </a>
    <!--card 3-->
    <a class="card" href="#Print">
      <img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
      <h3 class="center">Editing & Design in Print</h3>
      <p class="left">
        Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
        a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
      </p>
    </a>
  </div>
  <div class="card-row">
    <a class="card" href="#Business">
      <img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
      <h3 class="center">Business Principals of Publishing</h3>
      <p class="left">
        We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
        the world of digital publishing. Join us and build your foundation.

      </p>
    </a>
    <a class="card" href="#DigDesign">
      <img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
      <h3 class="center">Editing & Digital Design</h3>
      <p class="left">
        Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
        the essentials that intertwine them.
      </p>
    </a>
    <a class="card" href="#Access">
      <img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
      <h3 class="center">Accessibility of Information</h3>
      <p class="left">
        Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
        you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
      </p>
    </a>
  </div>
</section>

Answer 1

您有两个选择:
1 - 最简单的是设置 vertical-align:top在 .card

/*Cards*/

.container {
  display: grid/*| inline-grid*/
  ;
  grid-template-columns: 33%, 33%, 33%;
  grid-template-rows: 100px, 100px;
}

section .container {
  background-color: transparent;
}

.card-row {
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  line-height: 100%;
  text-align: center;
  /*height: 90%;*/
}

.card {
  width: 27%;
  border-radius: 20px 0px 20px 0px;
  background-color: rgba(77, 111, 117, .3);
  background-color: #96c6d9;
  display: inline-block;
  vertical-align: top;
  margin: 1em;
  /*height: 33em;*/
  height: 100%;
}

.card-heading {
  line-height: 2em;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
}

.card p {
  padding: .7em;
}

a.card {
  text-decoration: none;
  color: #121212;
}

.card:hover {
  border: 2px solid #f2f2f2;
  box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}

<section class="container m-a">
  <div class="card-row">
    <!--card 1-->
    <a class="card" href="#Copyright">
      <img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
      <div class="card-heading">
        <h3 class="center">Copyright, Censorship, and Plagiarism</h3>
      </div>
      <p class="left">
        Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
        first amendment rights and what you, as a publisher, should know about censorship.'
      </p>
    </a>
    <!--card 2-->
    <a class="card" href="#PubDigital">
      <img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
      <div class="card-heading">
        <h3 class="center">Publishing in Digital Media</h3>
      </div>
      <p class="left">
        A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
        essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
      </p>
    </a>
    <!--card 3-->
    <a class="card" href="#Print">
      <img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
      <div class="card-heading">
        <h3 class="center">Editing & Design in Print</h3>
      </div>
      <p class="left">
        Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
        a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
      </p>
    </a>
  </div>
  <div class="card-row">
    <a class="card" href="#Business">
      <img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
      <div class="card-heading">
        <h3 class="center">Business Principals of Publishing</h3>
      </div>

      <p class="left">
        We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
        the world of digital publishing. Join us and build your foundation.

      </p>
    </a>
    <a class="card" href="#DigDesign">
      <img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
      <h3 class="center">Editing & Digital Design</h3>
      <p class="left">
        Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
        the essentials that intertwine them.
      </p>
    </a>
    <a class="card" href="#Access">
      <img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
      <h3 class="center">Accessibility of Information</h3>
      <p class="left">
        Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
        you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
      </p>
    </a>
  </div>
</section>

2 - 这个是替换 display:inline-block与 display: inline-flex; flex-direction: column;

/*Cards*/

.container {
  display: grid/*| inline-grid*/
  ;
  grid-template-columns: 33%, 33%, 33%;
  grid-template-rows: 100px, 100px;
}

section .container {
  background-color: transparent;
}

.card-row {
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  line-height: 100%;
  text-align: center;
  /*height: 90%;*/
}

.card {
  width: 27%;
  border-radius: 20px 0px 20px 0px;
  background-color: rgba(77, 111, 117, .3);
  background-color: #96c6d9;
  display: inline-flex;
  flex-direction: column;
  margin: 1em;
  /*height: 33em;*/
  height: 100%;
}

.card-heading {
  line-height: 2em;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
}

.card p {
  padding: .7em;
}

a.card {
  text-decoration: none;
  color: #121212;
}

.card:hover {
  border: 2px solid #f2f2f2;
  box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}

<section class="container m-a">
  <div class="card-row">
    <!--card 1-->
    <a class="card" href="#Copyright">
      <img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
      <div class="card-heading">
        <h3 class="center">Copyright, Censorship, and Plagiarism</h3>
      </div>
      <p class="left">
        Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
        first amendment rights and what you, as a publisher, should know about censorship.'
      </p>
    </a>
    <!--card 2-->
    <a class="card" href="#PubDigital">
      <img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
      <div class="card-heading">
        <h3 class="center">Publishing in Digital Media</h3>
      </div>
      <p class="left">
        A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
        essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
      </p>
    </a>
    <!--card 3-->
    <a class="card" href="#Print">
      <img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
      <div class="card-heading">
        <h3 class="center">Editing & Design in Print</h3>
      </div>
      <p class="left">
        Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
        a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
      </p>
    </a>
  </div>
  <div class="card-row">
    <a class="card" href="#Business">
      <img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
      <div class="card-heading">
        <h3 class="center">Business Principals of Publishing</h3>
      </div>

      <p class="left">
        We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
        the world of digital publishing. Join us and build your foundation.

      </p>
    </a>
    <a class="card" href="#DigDesign">
      <img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
      <h3 class="center">Editing & Digital Design</h3>
      <p class="left">
        Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
        the essentials that intertwine them.
      </p>
    </a>
    <a class="card" href="#Access">
      <img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
      <h3 class="center">Accessibility of Information</h3>
      <p class="left">
        Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
        you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
      </p>
    </a>
  </div>
</section>

也可以使用 css flexbox 改进您的代码而不是 css grid , 这样你的 HTML 和 CSS 代码就会更少

body {
  margin: 0
}


/*Cards*/

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;
}

.card {
  box-sizing: border-box;
  width: calc((100%/3) - 2em);
  border-radius: 20px 0 20px;
  background-color: #96c6d9;
  margin: 1em;
  text-decoration: none;
  color: #121212;
}

.card:hover {
  border: 2px solid #f2f2f2;
  box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}

.card-heading {
  line-height: 2em;
  text-align: center;
  font-weight: 700;
}

.card p {
  padding: .7em;
}

<section class="container m-a">
  <!--card 1-->
  <a class="card" href="#Copyright">
    <img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
    <div class="card-heading">
      <h3 class="center">Copyright, Censorship, and Plagiarism</h3>
    </div>
    <p class="left">
      Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
      first amendment rights and what you, as a publisher, should know about censorship.'
    </p>
  </a>
  <!--card 2-->
  <a class="card" href="#PubDigital">
    <img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
    <div class="card-heading">
      <h3 class="center">Publishing in Digital Media</h3>
    </div>
    <p class="left">
      A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
      essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
    </p>
  </a>
  <!--card 3-->
  <a class="card" href="#Print">
    <img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
    <div class="card-heading">
      <h3 class="center">Editing & Design in Print</h3>
    </div>
    <p class="left">
      Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
      a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
    </p>
  </a>
  <a class="card" href="#Business">
    <img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
    <div class="card-heading">
      <h3 class="center">Business Principals of Publishing</h3>
    </div>
    <p class="left">
      We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
      the world of digital publishing. Join us and build your foundation.

    </p>
  </a>
  <a class="card" href="#DigDesign">
    <img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
    <h3 class="center">Editing & Digital Design</h3>
    </div>
    <p class="left">
      Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
      the essentials that intertwine them.
    </p>
  </a>
  <a class="card" href="#Access">
    <img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
    <div class="card-heading">
      <h3 class="center">Accessibility of Information</h3>
    </div>
    <p class="left">
      Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
      you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
    </p>
  </a>
</section>