我有一個網站，上面有一些卡片。卡片有 3 段文本、一個主標題、一個段落和底部的另一個標題 (h2)。我希望每張卡片的第二個標題與卡片底部的距離相同。我嘗試使用一些絕對和相對定位，但我認為有一些邊距或某些東西阻止我將標題保持在卡片底部的中心。有人能幫我嗎？
<section id="lifeSkillsSection">
<h1 class="courseSectionHeader">Life Skills</h1>
<!--begin building course cards\-->
<div class= "courseContainer">
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Basics of Personal Finance</h1>
<p class="courseDescription">Sign up for this class to learn all the critical topics and rules of personal finance.
Upon completion of this course, you will know how to build a budget, balance
a checkbook, the basics of financing a car or house, and more! We reccomend that all
Nehemiah Family Members without a broad understanding of personal finance
take this course. Click this card to sign up!
</p>
<h2 class="timeLength">This course has 3 classes and 1 qualification test.</h2>
</div>
</div>
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Principles of Manufacturing</h1>
<p class="courseDescription">Sign up for this class to learn about all the critical elements of consumer goods manufacturing.
Upon completion of this course, you will know how operations and supply chains work together,
how manufacturing plants analyze data, the basic principles of quality assurance, and more! We reccomend that all
Nehemiah Family Members take this course. Click this card to sign up!
</p>
<h2 class="timeLength">This course has 4 classes and 1 qualification test.</h2>
</div>
</div>
</div>
<!--next row of cards-->
<div class= "courseContainer">
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Faith and Spiritual Healing</h1>
<p class="courseDescription">Are you a person of faith? Do you want to dive deeper into your spirituality? This course focuses
on the main principles of faith and spirituality to encourage students to always seek a higher understanding.
We want our Family Members to be passionate about their faith and give them an opportunity to learn more and express
their spiritual desires. Click this card to sign up for this course!
</p>
<h2 class="timeLength">This course has 3 classes.</h2>
</div>
</div>
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Foundations of Family & Parenthood</h1>
<p class="courseDescription">In this class we teach what it takes to be an effective parent and develop a strong and healthy relationship
with your family. Learn about the basics of raising an infant, important techniques and strategies to help your children grow,
fun things you can do to bring your family together, and more! Click this card to sign up for the course!
</p>
<h2 class="timeLength">This course has 3 classes.</h2>
</div>
</div>
</div>
</section>
這是我的 css
.courseSectionHeader{
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 40px;
margin-top: 40px;
}
/*size containers and cards so that they can stretch as screen size changes*/
.courseContainer{
display: flex;
justify-content: center;
flex-direction: row;
}
.courseCard{
display: flex;
padding: 30px;
margin-left: 5%;
margin-right: 5%;
margin-top: 40px;
margin-bottom: 40px;
width: 500px;
height: auto;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
text-align: center;
justify-content: center;
font-family: "Source Sans Pro", sans-serif;
}
.courseCard:hover{
background-color: #c0221d;
cursor: pointer;
}
.courseText{
font-family: "Source Sans Pro",sans-serif;
color: white;
}
.courseHeader{
font-weight:900;
}
.courseDescription{
margin-top: 10%;
}
.timeLength{
margin-bottom: 5%;
margin-top: auto;
}
有人能幫我弄清楚如何讓所有這些底部標題與卡片底部的距離相同嗎？
uj5u.com熱心網友回復：
您可以使用 flexbox 來解決它。這個問題的標題更可能是：如何將子元素置于父元素的底部居中。
無論如何，您可以嘗試將這些樣式添加到現有規則中：
/* flex-container */
.courseCard {
display: flex;
flex-direction: column;
}
/* This rule remains the same. It's a flex-item */
.timeLength{
margin-bottom: 5%;
margin-top: auto;
}
如果您將自動邊距應用于 flex 專案，該專案將自動擴展其指定的邊距以占用 flex 容器中的額外空間，具體取決于應用自動邊距的方向。
閱讀更多：https : //css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
uj5u.com熱心網友回復：
我會position為要添加到卡片底部的元素添加樣式，并position為父元素添加另一種樣式。所以，這是position: relative為了<div 和 position: absolute; bottom: 0px <h2
.courseSectionHeader{
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 40px;
margin-top: 40px;
}
/*size containers and cards so that they can stretch as screen size changes*/
.courseContainer{
display: flex;
justify-content: center;
flex-direction: row;
}
.courseCard{
display: flex;
padding: 30px;
margin-left: 5%;
margin-right: 5%;
margin-top: 40px;
margin-bottom: 40px;
width: 500px;
height: 600px;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
text-align: center;
justify-content: center;
font-family: "Source Sans Pro", sans-serif;
position: relative;
}
.courseCard:hover{
background-color: #c0221d;
cursor: pointer;
}
.courseText{
font-family: "Source Sans Pro",sans-serif;
color: white;
}
.courseHeader{
font-weight:900;
}
.courseDescription{
margin-top: 10%;
}
.timeLength{
margin-bottom: 5%;
margin-top: auto;
position: absolute;
bottom: 0px;
} <section id="lifeSkillsSection">
<h1 class="courseSectionHeader">Life Skills</h1>
<!--begin building course cards\-->
<div class= "courseContainer">
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Basics of Personal Finance</h1>
<p class="courseDescription">Sign up for this class to learn all the critical topics and rules of personal finance.
Upon completion of this course, you will know how to build a budget, balance
a checkbook, the basics of financing a car or house, and more! We reccomend that all
Nehemiah Family Members without a broad understanding of personal finance
take this course. Click this card to sign up!
</p>
<h2 class="timeLength">This course has 3 classes and 1 qualification test.</h2>
</div>
</div>
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Principles of Manufacturing</h1>
<p class="courseDescription">Sign up for this class to learn about all the critical elements of consumer goods manufacturing.
Upon completion of this course, you will know how operations and supply chains work together,
how manufacturing plants analyze data, the basic principles of quality assurance, and more! We reccomend that all
Nehemiah Family Members take this course. Click this card to sign up!
</p>
<h2 class="timeLength">This course has 4 classes and 1 qualification test.</h2>
</div>
</div>
</div>
<!--next row of cards-->
<div class= "courseContainer">
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Faith and Spiritual Healing</h1>
<p class="courseDescription">Are you a person of faith? Do you want to dive deeper into your spirituality? This course focuses
on the main principles of faith and spirituality to encourage students to always seek a higher understanding.
We want our Family Members to be passionate about their faith and give them an opportunity to learn more and express
their spiritual desires. Click this card to sign up for this course!
</p>
<h2 class="timeLength">This course has 3 classes.</h2>
</div>
</div>
<div class="courseCard">
<div class="courseText">
<h1 class= "courseHeader">Foundations of Family & Parenthood</h1>
<p class="courseDescription">In this class we teach what it takes to be an effective parent and develop a strong and healthy relationship
with your family. Learn about the basics of raising an infant, important techniques and strategies to help your children grow,
fun things you can do to bring your family together, and more! Click this card to sign up for the course!
</p>
<h2 class="timeLength">This course has 3 classes.</h2>
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/325175.html