如果这很难理解，我深表歉意。
我正在挑战自己只使用 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>最佳答案
您有两个选择:
1 - 最简单的方法是在 .card 中设置 vertical-align:top
/*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 方向:列；
/*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>关于html - 使用行高: 100% is staggering the elements instead of making them match in height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65064220/