如何使所有卡片大小相同并排成一行？

Question

如何使所有卡片大小相同并排成一行？ 我尝试使用不同的样式，但卡片看起来很乱。我不知道我的 .css 代码需要更改什么。 我希望它看起来与页面和其他卡片对齐

.card {
width: 90%;
margin: 1rem;
padding-bottom: 1rem;

text-align: center;
border: solid 2px #fcad02;
border-radius: 10px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(217, 218, 182, 0.2);
}

.card a {
color: white;
font-size: 1.2rem;
text-decoration: none;
background-color: #1c36fc;
padding: 0.5rem;
border-radius: 7px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

 /*     Display two cards per row at 576px breakpoint */
@media (min-width: 576px) {
.cards-container {
 /*     Set the display for the outer container to flex */
display: flex;
display: inline-block;

 justify-content: space-around;
  }

.card {
/*  Set the flex-basis so that two cards are displayed in each row. */
flex-basis: calc(50% - 3rem);
}
}

/*  Display four cards across one row at 992px breakpoint */
@media (min-width: 992px) {
.card {
flex-basis: calc(25% - 3rem);
padding-bottom: 1.5rem;
}
}

.cardHeader {
text-align: center;
  }

Answer 1

这是因为第一张卡片的标题既宽又占 2 行。所以你需要将卡片的字幕宽度设置为固定长度（或最大宽度），并考虑字幕可能的高度。例如，如果最多可以占用 4 行，则应在所有卡上预留空间。