使用 line-height: 100% 是错开元素而不是让它们在高度上匹配
Using line-height: 100% is staggering the elements instead of making them match in height
如果这难以理解，我深表歉意。
我正在挑战自己只使用 CSS 和 HTML 来构建这个网站，以提高我使用 CSS 的技能。我遇到了两行的路障，每行包含三个“卡片”元素。这些卡片在高度上到处都是，我一直无法找到修复它的解决方案。我添加了以 px、em 和 % 值定义的行高。我无法以 px 为单位定义卡片的高度并仍然保持响应，所以我以 % 为单位定义它。高度：100% 会导致卡片溢出和交错，即使没有足够的内容来证明该行为是合理的。中间牌的底部落下，右边的两张重叠。我已经尝试过 max-height: 100% 来防止它们溢出，但这没有任何作用，因为内容不需要它们中的任何一个自行溢出。我尝试了 min-height: 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>
你有两个选择：
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-flex; flex-direction: column;
替换 display:inline-block
/*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>
如果这难以理解，我深表歉意。
我正在挑战自己只使用 CSS 和 HTML 来构建这个网站，以提高我使用 CSS 的技能。我遇到了两行的路障，每行包含三个“卡片”元素。这些卡片在高度上到处都是，我一直无法找到修复它的解决方案。我添加了以 px、em 和 % 值定义的行高。我无法以 px 为单位定义卡片的高度并仍然保持响应，所以我以 % 为单位定义它。高度：100% 会导致卡片溢出和交错，即使没有足够的内容来证明该行为是合理的。中间牌的底部落下，右边的两张重叠。我已经尝试过 max-height: 100% 来防止它们溢出，但这没有任何作用，因为内容不需要它们中的任何一个自行溢出。我尝试了 min-height: 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>
你有两个选择：
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-flex; flex-direction: column;
display:inline-block
/*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>