如何正确设置css卡片的大小

Question

所以这是我的第一个项目。我希望你能帮我。我尝试了一切，但我不知道我做错了什么，如果有人知道解决方案，我会很感激。你能帮我一下吗我想让这些卡片保持相同的大小，所有的卡片都和有两个段落的卡片一样我怎么能做到呢?看看它是什么样子

.card-project{
background-color: white;
border: 1px solid white;
min-height: 14em;
width: 23em;
overflow: hidden;
border-radius: 10px;
margin: 20px;
transition: 0.7s ease;
}
.card-project:hover{
transform: scale(1.1);
}
.img-project img{
width: 100%;
}
.card-project:hover .img-project{
opacity: 0.9;
}
.info-project{
padding: 1em;

}
.category{
font-size: 1em;
color: black;
}

.title-project{
display: flex;
justify-content: space-between;
font-weight: 800;
margin-top: 10px;

}
.content{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}

<section class="projects" id="projects">
<h2 class="title">Projects</h2>
<div class="content">
<div class="card-project">
<div class="img-project">
<img src="icons/projetcs/ytb1.png">
</div>
<div class="info-project">
<p class="category">Some Thresh Play</p>
<strong class="title-project">
<span>0SiFo0</span>
<a class="more-details" href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
More details
</a>
</strong>
</div>
</div>

Answer 1

你好，你的代码有很多问题，但是，我试图达到你正在寻找的东西。如果你需要的话，我可以给你做一个专业的版式，因为这个版式不太干净，也不太有条理。

还有一个建议，请看看css reset，从头开始设计你的网站，以了解技巧。

body {
background-color: black;
}
.card-project{
background-color: white;
border: 1px solid white;
overflow: hidden;
border-radius: 10px;
transition: 0.7s ease;
display: grid;
grid-template-rows: auto 1fr;
}
.card-project:hover{
transform: scale(1.1);
}
.img-project {
display: grid;
place-items: center;
overflow: hidden;
}
.img-project img{
display: block;
vertical-align: bottom;
aspect-ratio: 1 / .5;
max-width: 100%;
object-fit: cover;
}
.card-project:hover .img-project{
opacity: 0.9;
}
.info-project{
padding: .5em;
display: grid;
}
.category{
font-size: 1em;
color: black;
margin-block: 0 1em;
}
.title-project{
display: flex;
justify-content: space-between;
font-weight: 800;
margin-top: auto;
}
.content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
gap: 1em;
}

<section class="projects" id="projects">
<h2 class="title">Projects</h2>
<div class="content">
<div class="card-project">
<div class="img-project">
<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg">
</div>
<div class="info-project">
<p class="category">Some Thresh Play long looooong loooong veeeeery long title</p>
<strong class="title-project">
<span>0SiFo0</span>
<a class="more-details" href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
More details
</a>
</strong>
</div>
</div>
<div class="card-project">
<div class="img-project">
<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg">
</div>
<div class="info-project">
<p class="category">Some Thresh Play</p>
<strong class="title-project">
<span>0SiFo0</span>
<a class="more-details" href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
More details
</a>
</strong>
</div>
</div>
<div class="card-project">
<div class="img-project">
<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg">
</div>
<div class="info-project">
<p class="category">Some Thresh Play</p>
<strong class="title-project">
<span>0SiFo0</span>
<a class="more-details" href="https://www.youtube.com/watch?v=zRDfPBgSiaw&ab_channel=0SiFo0" target="_blank">
More details
</a>
</strong>
</div>
</div>
</div> 
</section>

Answer 2

运行你的代码，我看不到卡片加上整个html是混乱的，所以我只是重新编码你的问题。如果有问题，请随时评论。

.mainCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000000;
}
.projectCon {
position: absolute;
top: 0%;
width: 70%;
height: 100%;
background-color: blue;
}
.level1 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 20%;
}
.level1 p {
font-size: 4vw;
font-weight: 600;
}
.level2 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 20%;
left: 0%;
width: 100%;
height: 80%;
}
.level2Item1 {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
}
.level2Item2 {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
height: 50%;
}
.projectDisplay {
width: 16%;
height: 80%;
border-radius: 8px;
background-color: #ffffff;
}

<div class="mainCon">
<div class="projectCon">
<div class="level1">
<p>Projects</p>
</div>
<div class="level2">
<div class="level2Item1">
<div class="projectDisplay">
</div>
<div class="projectDisplay">
</div>
<div class="projectDisplay">
</div>
<div class="projectDisplay">
</div>
</div>
<div class="level2Item2">
<div class="projectDisplay">
</div>
<div class="projectDisplay">
</div>
<div class="projectDisplay">
</div>
<div class="projectDisplay">
</div>
</div>
</div>
</div>
</div>

Answer 3

这里有一些可以运行的示例。你可以全屏看，这样你就有想法了。让我知道。

h1 {text-align:center;}
body {
background-color:beige;
width:100%;
height:auto;
}
.featured {
width:300px;
height:250px;
box-shadow:0px 4px 12px 0px;
border-radius:20px;
margin:20px;
background-color:white;
}
.featured-container {
display:grid;
grid-template-columns:auto auto auto ;
grid-gap:20px;
justify-content:center;
}
.featured > img {
object-fit:cover;
width:300px;
height:150px;
border-radius:20px 20px 0px 0px;
}

.featured-info  {
display:grid;
grid-template-columns:auto auto;
justify-content:space-evenly;
}
.featured-info > p {line-height:100%;}
.category{
font-size: 1em;
color: black;
}

.title-project{
display: flex;
justify-content: space-between;
font-weight: 800;
margin-top: 10px;

}
.content{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}

<div class="myproject">
<h1> Projects </h1>
<div class="featured-container">
<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">

<div class="featured-info">
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

</div>
</div>


<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">

<div class="featured-info">
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

</div>
</div>


<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">

<div class="featured-info">
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</div>



<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">

<div class="featured-info">
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

</div>
</div>

<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">

<div class="featured-info">
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</div>

<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">

<div class="featured-info">
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

</div>
</div>

</div>