繁体   English   中英

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

[英]How to make all cards same size and aligned in a row?

如何使所有卡片大小相同并排成一行? 我尝试使用不同的样式,但卡片看起来很乱。 我不知道我需要在 my.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;
  }

在此处输入图像描述

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

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM