使用线高: 100%是使元素错开，而不是使它们在高度上匹配。

Question

如果这很难理解的话，我很抱歉。

我是在挑战自己，只使用CSS和HTML来构建这个网站，以提高我的CSS技能。我遇到了一个路障，其中有两个行，每个行包含三个“卡片”元素。卡片的高度到处都是，我一直找不到解决办法来解决它。我添加了在px，em和%值中定义的行高.我不能在px中定义卡的高度，并且仍然保持它的响应性，所以我用%来定义它。高度: 100%会导致卡溢出和错开，即使没有足够的内容来证明这种行为是合理的。中间牌的底部下垂，右边的两张重叠。我已经尝试了最大高度: 100%，以防止它们溢出，但这没有任何作用，因为内容不需要他们中的任何一个溢出本身。我试过最低身高: 100%，但这也给了我同样的问题: 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>

​