2

如果这很难理解，我深表歉意。

我挑战自己只使用 CSS 和 HTML 来构建这个网站，以提高我的 CSS 技能。我遇到了一个有两行的路障，每行包含三个“卡片”元素。这些卡片到处都是高度，我无法找到解决方案来修复它。我添加了以 px、em 和 % 值定义的行高。我无法以 px 定义卡片的高度并仍然保持响应，因此我以 % 定义了它。高度：100% 会导致卡片溢出和错开，即使没有足够的内容来证明该行为是正确的。中间卡的底部下降，右侧的两个重叠。我已经尝试过 max-height: 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>

4

1 回答 1

2

你有两个选择：

vertical-align:top1 - 最简单的是设置.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>

于 2020-11-29T19:43:15.957 回答